Question

我正在尝试使用:after伪元素CSS选择器

设置元素的样式

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

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

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

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

Answer 1

Pseudo-elements被视为其关联元素的后代。要将伪元素放置在其父元素下方，您必须创建new stacking context以更改默认堆叠顺序定位伪元素（绝对）并指定除“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>

Answer 2

我知道这是一个老线程，但我觉得有必要发布正确答案。这个问题的实际答案是你需要在元素的父元素上使用伪元素创建一个新的堆叠上下文（实际上你必须给它一个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;
}

它与使用：before或：after伪元素无关。

#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>

Answer 3

尝试一下

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

Answer 4

这里有两个问题：

CSS 2.1规范声明“：之前和之后的伪元素元素与其他框架交互，例如运行框，就好像它们是在关联元素内部插入的真实元素一样。”鉴于在大多数浏览器中实现z索引的方式，在所有浏览器中运行的DOM中移动内容低于其父元素的z-index非常困难（阅读，我不知道如何）。 / p>
上面的第1个并不一定意味着它是不可能的，但它的第二个障碍实际上更糟：最终它是浏览器支持的问题。在FF3.6之前，Firefox根本不支持生成内容的定位。谁知道像IE这样的浏览器。因此，即使您可以找到一个hack来使其在一个浏览器中运行，它很可能只能在该浏览器中运行。

我能想到的唯一可以跨浏览器工作的是使用javascript来插入元素而不是CSS。我知道这不是一个很好的解决方案，但是：之前和之后：伪选择器真的看起来不像它们会在这里削减它。

Answer 5

就规范（http://www.w3.org/TR/CSS2/zindex.html）而言，由于a.someSelector被定位，它会创建一个新的堆叠上下文，其子项无法突破。保持a.someSelector未定位，然后将子a.someSelector：after放在与a.someSelector相同的上下文中。

Answer 6

我知道这个问题很古老，并且有一个公认的答案，但我找到了一个更好的解决方案。我在这里发布它所以我不会创建一个重复的问题，并且其他人仍然可以使用该解决方案。

切换元素的顺序。将:before伪元素用于下面应该包含的内容，并调整边距以进行补偿。保证金清理可能会很混乱，但会保留所需的z-index。

我已成功使用IE8和FF3.6进行了测试。

Answer 7

将z-index或:before伪元素的:after设置为-1，并为其position提供z-index属性{{1} }，absolute或relative）。这是因为伪元素fixed是相对于其父元素而不是z-index，这是其他元素的默认元素。这是有道理的，因为它们是<html>的子元素。

我遇到的问题（引导我回答这个问题以及上面接受的答案）是我试图使用<html>伪元素来获得具有{{1}元素背景的幻想15，即使设置为:after为14，它仍然在其父级之上呈现。这是因为，在该堆叠上下文中，它的父级的z-index为0。

希望这有助于澄清一些事情。

Answer 8

我将其修复非常简单：

.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元素之下，因此将不可见。

这也适用于伪元素，例如：之后

Answer 9

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

您需要具备的是：

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

是否可以将伪元素的堆叠顺序设置在其父元素下面？

9 个答案: