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）定位元素默认后者层级高于前者。
1522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
