css – 元素的z-index对z-index的影响：before /：after伪元素

这是一个我不太了解的关于z-index和css伪元素:: before / :: after的行为.

它在这个jsfiddle：http://jsfiddle.net/jgoyon/T6QCf/上有说明

我创建了一个定位框并使用:: after伪元素添加内容(也定位).

>如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下

#no-z-index {
      background:lightblue;
      width:100px;
      height:100px;
      position:relative;
    }
    #no-z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

>如果我这样做并设置父级的z-index,它就不再起作用了.

#z-index {
      background:lightblue;
      left:200px;
      width:100px;
      height:100px;
      position:relative;
      z-index:0; /* parent z-index */
    }
    #z-index:after {
      content: 'z-index -1';
      width:50px;
      height:50px;
      background:yellow;
      position:absolute;
      z-index:-1; /* z-index in question */
      top:70px;
      left:70px;
    }

这是预期的行为吗？

解决方法

这是预期的行为,记录在 spec中.

如果未在生成元素上指定z-index(默认为auto),则生成元素和伪元素将出现在同一堆叠上下文中.这允许伪元素在其z-index较低时出现在元素下方.

当你在生成元素上指定z-index时,该元素为伪元素(实际上是它的所有后代)创建一个新的堆叠上下文,防止伪元素出现在它下面,即使你给它一个负z指数.