7

这是我不太了解的关于 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;
    }

这是预期的行为吗？

4

1 回答 1

11

这是预期的行为，记录在规范中。

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

当您z-index在生成元素上指定时，该元素会为伪元素（实际上是它的所有后代）创建一个新的堆叠上下文，即使您给它一个负值，它也不会出现在它的下方z-index。

于 2013-04-13T15:28:17.727 回答