是否可以设置伪元素的堆叠顺序低于他们的父元素?

我试图用:after伪元素CSS选择器样式化一个元素

#element {
position: relative;
z-index: 1;
}


#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}

似乎::after元素不能比元素本身更低。

有没有办法让伪元素低于元素本身?

336040 次浏览
小开

这里有两个问题:

  1. css2.1规范规定:“__abc0和:after伪元素元素与其他框(如运行框)交互，就好像它们是插入到其关联元素中的真实元素一样。”考虑到z索引在大多数浏览器中实现的方式，将内容移动到所有浏览器中都适用的DOM中父元素的z索引以下是相当困难的(阅读，我不知道有什么方法)。

  2. 上面的第一条并不一定意味着它是不可能的，但第二个障碍实际上更糟糕:归根结底是浏览器支持的问题。Firefox直到FF3.6才支持生成内容的定位。谁知道像IE这样的浏览器。所以即使你能找到一个破解方法让它在一个浏览器中工作，它也很可能只能在那个浏览器中工作。

我能想到的唯一一件事是跨浏览器工作是使用javascript插入元素，而不是CSS。我知道这不是一个很好的解决方案，但是:before和:after伪选择器看起来真的不像它们会在这里解决问题。

小开

关于规范(http://www.w3.org/TR/CSS2/zindex.html)，由于a.someSelector被定位，它创建了一个新的堆叠上下文，它的子对象不能跳出。让a.someSelector不被定位，那么子a.someSelector:after可能被定位在与a.someSelector相同的上下文中。

小开

我知道这个问题很古老，也有一个公认的答案，但我找到了一个更好的解决方案。我把它贴在这里，这样我就不会产生重复的问题，而且解决方案仍然可供其他人使用。

切换元素的顺序。对于下面的内容使用:before伪元素，并调整页边距进行补偿。边缘清理可能会很混乱，但所需的z-index将被保留。

我已经成功地用IE8和FF3.6测试了这个功能。

小开

我知道这是一个旧的帖子，但我觉得有必要张贴适当的答案。这个问题的实际答案是，您需要在带有伪元素的元素的父元素上创建一个新的堆叠上下文(并且您实际上必须给它一个z-index，而不仅仅是一个位置)。

是这样的:

#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}


#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }


/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }
<div id="parent">
<div id="pseudo-parent">
&nbsp;
</div>
</div>

小开
最佳答案

伪元素被视为其关联元素的后代。要将一个伪元素放置在它的父元素下面，你必须创建新的堆叠上下文来改变默认的堆叠顺序 定位伪元素(absolute)并分配一个除" auto "之外的z-index值创建新的堆叠上下文 

#element {
position: relative;  /* optional */
width: 100px;
height: 100px;
background-color: blue;
}


#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;


/* create a new stacking context */
position: absolute;
z-index: -1;  /* to be below the parent element */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position a pseudo-element below its parent</title>
</head>
<body>
<div id="element">
</div>
</body>
</html>

小开

将:before或:after伪元素的z-index设置为-1，并赋予它一个position，以实现z-index属性(absolute、relative或fixed)。这是因为伪元素的z-index相对于它的父元素，而不是<html>，这是其他元素的默认值。这是有意义的，因为它们是<html>的子元素。

我遇到的问题(导致我提出这个问题和上面接受的答案)是，我试图使用:after伪元素来为z-index为15的元素添加背景，即使设置为z-index为14，它仍然在其父元素之上呈现。这是因为，在那个堆栈上下文中，它的父对象的z-index为0。

希望这能帮你弄清楚到底发生了什么。

小开

试试吧

el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
小开

我不知道是否有人会有同样的问题。所选的答案部分正确。

你需要的是:

parent{
z-index: 1;
}
child{
position:relative;
backgr
小开

我解决得很简单:

.parent {
position: relative;
z-index: 1;
}


.child {
position: absolute;
z-index: -1;
}

这样做的是将父元素堆叠在z-index: 1处，这就给了子元素空间“结束”在z-index: 0处，因为其他dom元素“存在”在z-index: 0上。如果我们不给父元素一个z-index为1，子元素就会在其他dom元素下面，因此不可见。

这也适用于像:在这样的伪元素


提交答案