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

Posted

技术标签:

【中文标题】元素的 z-index 对 :before / :after 伪元素的 z-index 的影响【英文标题】:Influence of the z-index of an element on the z-index of :before / :after pseudo element 【发布时间】:2013-04-06 01:04:06 【问题描述】:

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

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

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

如果我为 ::after 伪元素设置 z-index,一切正常,我可以通过使用 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;
    

这是预期的行为吗?

【问题讨论】:

【参考方案1】:

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

当您没有在生成元素上指定z-index(默认为auto)时,生成元素和伪元素将出现在同一个堆叠上下文中。如果 z-index 较低,这允许伪元素出现在元素下方。

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

【讨论】:

我刚刚想起answering a duplicate question 一段时间了。

以上是关于元素的 z-index 对 :before / :after 伪元素的 z-index 的影响的主要内容,如果未能解决你的问题,请参考以下文章

使用 :before CSS 伪元素将图像添加到模态

z-index 无法使用 Internet Explorer [重复]

悬停效果不适用于 z-index 较低的元素

你可以对 :before/:after 伪元素 (content:url(image)) 应用宽度吗?

浅析CSS——元素重叠及position定位的z-index顺序

position: fixed z-index 是不是相对于其父级的 z-index?