static默认定位方式
默认值。元素框正常生成。块级元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会创建一个或多个矩形框,置于其父元素中。
relative相对定位
相对该元素应当显示的左上角重新定位,虽然脱离了标准流,但它原来的空间不能被占用。
Snip20170102_1.png
//html文件
Document
内容1
内容2
内容3
内容4
//css文件
.div1{
width: :70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px
}
#spe{
position: relative;
left:40px;
top:100px;
}
absolute绝对定位
是指对该元素最近的那个脱离的标准流的元素定位,如果没有父元素,则相对body左上角定位
Snip20170102_2.png
注意:如果决定定位的这个元素的父元素脱离了标准流,那么设定位置将是相对于他的父元素,如图:
Snip20170102_3.png
//只贴出关键代码
//html文件
内容2
//只贴出关键代码
//css文件
.div2{
position: relative;
width: 200px;
height: 150px;
left: 100px;
top: 100px;
background:pink;
float: left;
}
#spe{
position: relative;
left:40px;
top:100px;
}
fix固定定位
元素框的表现类似于将position设置为absolute,不过其参考系是视窗本身。
z-index层级设置
值小则会在底层
Snip20170102_5.png