css-高级定位指导规则
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
1 定位父对象底边
body{
background-color: deepskyblue;
}
.test{
position:absolute;
bottom:100px;
width:200px;
height:200px;
padding:5px10px;
background:#c00;
color:#fff;
line-height:12;
}
我将出现在浏览器底部
2 父对象左边
body{
background-color: deepskyblue;
}
.test{
position:absolute;
left:100px;
width:200px;
height:200px;
padding:5px10px;
background:#c00;
color:#fff;
line-height:12;
}
我将出现在浏览器左上角
3 检索对象定位方式
body{
background-color: deepskyblue;
}
#staticPosition{
position:static;
top:80%;
left:80%;
width:200px;
height:100px;
background-color: black;
color: white;
line-height:2;
}
/*绝对定位*/
#absolutePosition{
position:absolute;
top:600px;
left:700px;
width:200px;
height:100px;
background: red;
line-height:2.4;
}
/*相对定位*/
#relativePosition{
position:relative;
top:100px;
left:100px;
width:200px;
height:100px;