伪元素方案中对伪元素设置z-index:-1后，会使得伪元素的层叠层次不仅被推到宿主元素之后，甚至可能推到宿主元素的父级元素的背景之后，导致无效。 [demo](http://codepen.io/hardfist/pen/MeKadB) 解决方法：为.button添加z-index:0。
Activity
cssmagic commentedon Jun 16, 2016
谢谢反馈。稍后会确认你提到的这个问题。
也欢迎其他读者参与讨论 😃
jimyuan commentedon Jun 29, 2016
的确，亲测过，如楼主所说。
但问题貌似没这么简单，为啥在我测试下来（Chrome 51），只要给宿主加
z-index，不管啥值，这个伪元素始终会叠加在宿主上。所以书上这个 demo 所示方案的使用场景要打个问号。
hardfist commentedon Jul 2, 2016
宿主不设置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 commentedon Feb 22, 2017
@hardfist
谢谢提示，我稍后会整理到注解中。
XavierZhao1989 commentedon Jul 21, 2017
@hardfist 在项目也遇到了相似的问题，给宿主加z-index值就算比after也没有用。还是会覆盖宿主，最后根据你的回答，我把after设置负值就解决了
oNexiaoyao commentedon Mar 22, 2018
这个最新的注解呢？关于使用z-index为负数时，出现在不同的位置。。对照书写毛玻璃这块代码遇到这个问题。。