349

我正在尝试使用:after伪元素 CSS 选择器来设置元素的样式

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

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

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

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

4

9 回答 9

441

伪元素被视为其关联元素的后代。要将伪元素定位在其父元素下方，您必须创建一个新的堆叠上下文来更改默认堆叠顺序。
定位伪元素（绝对）并分配除“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>

于 2012-05-30T18:32:54.920 回答
277

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

于 2012-01-30T23:44:28.723 回答
159

试试看

el {
  transform-style: preserve-3d;
}
el:after {
  transform: translateZ(-1px);
}
于 2018-07-19T21:49:35.353 回答
15

这里有两个问题：

  1. CSS 2.1 规范声明“The:before和:after伪元素元素与其他框交互，例如插入框，就好像它们是插入到相关元素中的真实元素一样。” 鉴于大多数浏览器中实现 z-index 的方式，在所有浏览器中都可以使用的 DOM 中，将内容移动到低于其父元素的 z-index 是非常困难的（阅读，我不知道有什么方法）。

  2. 上面的数字 1 并不一定意味着它是不可能的，但它的第二个障碍实际上更糟：最终它是浏览器支持的问题。直到 FF3.6，Firefox 才完全不支持生成内容的定位。谁知道像IE这样的浏览器。因此，即使您可以找到一种使其在一个浏览器中运行的技巧，它也很可能只能在该浏览器中运行。

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

于 2010-06-14T19:53:41.740 回答
11

谈到规范（http://www.w3.org/TR/CSS2/zindex.html），由于a.someSelector定位它创建了一个新的堆叠上下文，它的孩子无法摆脱。保持a.someSelector未定位，然后 childa.someSelector:after可以定位在与 相同的上下文中a.someSelector。

于 2010-06-14T20:20:12.983 回答
10

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

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

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

于 2011-02-28T20:09:00.427 回答
6

将or伪元素的z-indexof设置为 -1 并为其赋予一个尊重属性（、或）的值。这是有效的，因为伪元素是相对于其父元素的，而不是，这是其他元素的默认值。这是有道理的，因为它们是.:before:afterpositionz-indexabsoluterelativefixedz-index<html><html>

我遇到的问题（导致我提出这个问题和上面接受的答案）是我试图使用:after伪元素来获得具有z-index15 的元素的背景，即使设置z-index为 14，它仍在其父级之上渲染。这是因为，在那个堆叠上下文中，它的父级的 az-index为 0。

希望这有助于澄清发生了什么。

于 2017-11-17T03:08:11.210 回答
0

我很简单地修复了它：

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

这也适用于伪元素，如:after

于 2019-04-03T12:16:47.303 回答
-4

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

你需要的是：

parent{
  z-index: 1;
}
child{
 position:relative;
 backgr
于 2019-03-20T22:33:55.353 回答