Question

这是一个我不太了解的关于z-index和css伪元素::在/ ::之后的行为。

这个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;
    }

这是预期的行为吗？

Answer 1

这是预期的行为，记录在spec。

中

如果未在生成元素上指定z-index（默认为auto），则生成元素和伪元素将出现在相同的堆叠上下文中。如果伪元素的z-index较低，则允许伪元素出现在元素下方。

当您在生成元素上指定z-index时，该元素会为<-em>伪元素（实际上是其所有后代）创建一个新的堆叠上下文，从而阻止伪即使你给它一个负z-index，它也会出现在它下面。

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

1 个答案: