使用z-index了解的新姿势

z-index是用来设置元素重叠时的堆叠层级的；只对定位元素有效；当值为整数时浏览器一般是有个极限值的。

之前关于z-index个人的印象就这么多，近期发现z-index有个比较奇怪的现象。

当父元素已经设置了z-index时，后代元素上设置的z-index似乎是无效的。

以前上图形学课记得屏幕元素基本可以看做放在三维坐标系中，当元素重叠时可以根据元素Z轴坐标的大小来确定是否可见。z-index属性听这个名字就觉得应该是差不多的东西，可是上面的结果和直觉并不符合。

后来在MDN上找到了原因：

整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-index 不与元素外的其余元素的 z-index 进行对比。

所以后代元素的z-index只在和父元素内的元素比较时有效，当和父元素外的元素发生重叠时，会根据父元素的z-index决定是否显示。

比如有两个元素A、B, z-index分别为15, 10。B中有个子元素C的z-index为20。当A和B重叠时，感觉应该是B被A遮挡，而B中的C则会显示。but事实上C也不会显示。

参考