z-index随笔

z-index这个css属性是用来控制层级的，但是它的表现有点奇怪，这里做下记录。

 

假如有ABC三层，都没设置z-index时，是按dom节点顺序来控制层级。

 

此时如果B元素下有个元素D，设置了z-index：1，这个子元素会无视父元素（也就是B）的层级，直接到最高层，盖住A和C。

 

要让他恢复正常很简单，设置B元素的z-index:0，这样B元素仍然在A/C中间，D的z-index只对同级元素起作用，不会跑到A和C上面。

 

据此推断，z-index的判断逻辑应该是：

1. 父元素无z-index时，以子元素z-index为准，可以超出父元素的层级。

2. 父元素有z-index时，以父元素z-index为准，不可超出父元素层级，但是自身z-index可以在同级元素中生效。