彻底明白 position及z-index的用法 static ,absolute ,relative

彻底明白 position及z-index的用法

static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置,

 

z-index：其实从字面上已经可以解释；z是从x、y以后的第三个轴，从网页上表现就是除了上下左右外的前后。
规定这个属性，首先要求Div必须是浮动的，z值越大，Div越靠前；数值可以不连续。

 

例如

<div style="z-index:1000;background:red;color:white;width:200px;height:200px;">图层1</div>
<div style="z-index:100;background:yellow;color:blue;width:200px;height:200px;position:absolute;left:70px;top:120px;">图层2</div>
<div style="z-index:10;background:green;color:white;width:200px;height:200px;position:relative; left:30px;top:-150px;">图层3</div>

 

 

理论上图层1的z-index值设最大，应该排在最上面，由于它没有设浮动，遵循HTML定位规则

为什么图层3的top设负值呢？因为position:relative不能层叠，它应该是在图层1的下方，如果要它上去一点。只能设负值。而图层2设position:absolute浮动效果，它可以任意摆放，不受其它div影响，完全根据html页面定位