P58:伪元素方案的覆盖问题

[hardfist]

伪元素方案中对伪元素设置z-index:-1后，会使得伪元素的层叠层次不仅被推到宿主元素之后，甚至可能推到宿主元素的父级元素的背景之后，导致无效。 demo
解决方法：为.button添加z-index:0。

[cssmagic]

谢谢反馈。稍后会确认你提到的这个问题。

也欢迎其他读者参与讨论 😃

[jimyuan]

的确，亲测过，如楼主所说。
但问题貌似没这么简单，为啥在我测试下来（Chrome 51），只要给宿主加 z-index，不管啥值，这个伪元素始终会叠加在宿主上。
所以书上这个 demo 所示方案的使用场景要打个问号。

[hardfist]

宿主不设置z-index值，那么默认值为auto，根据规范分层显示可得
1.若宿主z-index:auto,宿主和body属于同一个层叠上下文，根据分层图可得，before元素属于2.层叠级别为负值的后代层叠上下文而body的背景属于3常规流内非定位子元素组成的层，所以3在2的前面
2.若宿主z-index不为auto，宿主和body不属于同一个层叠上下文，before在宿主所处的层叠上下文里，而宿主的z-index为0或正值时属于层级6和7在3之前所以可见，但假如z-index为负值则又在3之后，又不可见了。

[cssmagic]

@hardfist
谢谢提示，我稍后会整理到注解中。

[YorickLane]

@hardfist 在项目也遇到了相似的问题，给宿主加z-index值就算比after也没有用。还是会覆盖宿主，最后根据你的回答，我把after设置负值就解决了

[oNexiaoyao]

这个最新的注解呢？关于使用z-index为负数时，出现在不同的位置。。对照书写毛玻璃这块代码遇到这个问题。。