1.相对定位(relative):
(1)不会影响元素本身的特征
(2)元素不脱离文档流,元素移动之后原始位置被保留。
(3)如果没有设置偏移量,对元素没有任何影响。
(4)提升层级,移动之后会覆盖原来的元素。
<style>
div{
border: 1px solid black;
}
#all{
width: 500px;
height: 500px;
position: relative;
}
#div1,#div2{
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
}
#div1{
background-color: red;
}
#div2{
background-color: green;
}
</style>
<body>
<div id="all">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
给div1的style加上“position: relative;top: 162px;”之后,div1提升层级,完全覆盖div2,且div1之前的位置依然保留。(这里是162px,因为是20*2(padding)+100(height)+20(margin)+1*2(border))
------------------------------------------------------------------------------------------------------分割线----------------------------------------------------------------------------------------------------------------------
2.绝对定位(absolute):
(1)使元素脱离文档流,原来元素的位置不再保留。
(2)如果是内嵌元素,则支持宽高的设置,如果是块状元素,则默认内容撑开宽高。
(3)如果有定位父级则相对于父级发生偏移,没有则相对于文档流发生偏移。
(4)相对定位一般配合绝对定位使用。
(4)提升层级,移动之后会覆盖原来的元素。
#div1{
background-color: red;
position: absolute;
left: 150px;
}
#div2{
background-color: green;
}
div1进行绝对定位之后,脱离文档流,不占据原来的位置,div2移动上去。
------------------------------------------------------------------------------------------------------分割线----------------------------------------------------------------------------------------------------------------------
3.固定定位(fixed):
与绝对定位特性基本一致,差别是始终相对于整个文档流进行定位。
4.定位层级(z-index):
(1)基本样式:z-index:[number],number越大,层级越高。
(2)定位元素默认后者层级高于前者。