【absolute和Z-index对层级关系的影响】

absolute和Z-index对层级关系的影响

遇到的问题

遇到的问题

有时候我们使用absolute绝对定位和z-index，来调整元素的位置与层级关系，可总是遇到一些出乎我们意料的状况，不知道大家有没有碰到和我一样的问题。话不多说，上代码

1 不使用position

这种情况下每一层都遵循 HTML 定位规则,其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现.

2 使用absolute

如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.

2.1 未使用z-index

这种情况下,依据它们在HTML文档中声明的顺序层叠,因为 z-index 在未设置的情况下,默认为 0

<div class = "1" style="top:10; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">1</div>
<div class = "2" style="top:40; left:40; width:100px ;height:50px; border:1px solid #999; background:red; position:absolute;">2</div> 
<div class = "3" style="top:80; left:50; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;">3</div>

此时，1位于最下面，2位于中间，3位于最上面，也就是3把1/2都盖住了，2把1给盖住了。

2.2 使用z-index

z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层.

<div class = "1" style="top:10; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute ;">1</div> 
<div class = "2" style="top:30; left:40; width:100px ;height:50px; border:1px solid #999; background:red; position:absolute;z-index:1;" >2</div> 
<div class = "3" style="top:50; left:20; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1;">3</div>

此时，1在中间，2在最上面，3在最下面

2.3 父子关系

对于父子元素,子元素的从属于父元素的层次,子元素在父层的上面

<div class = "1" style="width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;z-index:1">1
	<div class = "2" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;position:absolute;z-index:-1" >2</div>
</div>
<div class = "3" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:0" >3</div>

即使2的z-index为-1，1的z-inddex为1，但是2为1的子元素，所以2仍然在1的上面
此时，1在中间，2在最上面，3在最下面

3混合使用absolute

对于没有设置 position:absolute 属性的元素不管 z-index 设置多少都为 0, 都低于 position:absolute 中 z-index:0 的元素

<div class = "1" style="top:30; left:30; width:100px ;height:50px; border:1px solid #999; background:green; position:absolute;">1</div>
<div class = "2" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:red;z-index:1" >2</div> 
<div class = "3" style="top:20; left:40; width:100px ;height:50px; border:1px solid #999; background:yellow;position:absolute;z-index:-1" >3</div>