P58:伪元素方案的覆盖问题 about css-secrets HOT 6 OPEN

宿主不设置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之后，又不可见了。

from css-secrets.

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

from css-secrets.

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

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

from css-secrets.

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

from css-secrets.

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

from css-secrets.

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

from css-secrets.