如何在其父级之后但在其祖父级之前以绝对定位获取伪元素？ [复制]答案

【问题标题】：How do I get a pseudoelement behind its parent but in front of its grandparent with absolute positioning? [duplicate]如何在其父级之后但在其祖父级之前以绝对定位获取伪元素？ [复制]
【发布时间】：2020-05-03 22:45:12
【问题描述】：

考虑如下情况：

<div id="one"/>
<div id="two">
   <div id="three"/>
</div>
<div id="four"/>

我想给三个一个伪元素，它出现在它后面但在两个前面（以及任何其他祖先，如果有更多的话）。对我来说复杂的是，我正在使用一个生成 HTML 和 CSS 的 UI 框架，所以我不能针对这种情况做一些特定的事情——它必须在一般情况下工作。该框架生成使用绝对定位的 div，因此假设 1、2 和 4 是绝对定位的。三和它的伪元素可以有不同的位置值，只要它们表现正确。

z-index -1 上的伪在本地工作得很好，但使它出现在两个后面。好的，通过将其 z-index 设置为 0 在三个上创建一个新的堆叠上下文，但这不起作用。我想我误解了整个堆栈上下文的事情。

如果你想知道我真正在做什么，我正在尝试为框架添加圆角渐变边框支持。

【问题讨论】：

你能创建一个minimal reproducible example吗，这很难理解。你不能给.two 1 的z-index，.three::before 2 的z-index 和.three 3 的z-index？
这是一个可以玩弄的小提琴：jsfiddle.net/36p4d21h 这似乎不起作用。此外，理想情况下，我不必在树上上下修改多个 z 索引。我可能不得不把它吸起来并使用一个额外的真实 div。

标签： html css z-index pseudo-element

【解决方案1】：

啊，你的 jsfiddle 清晰多了。你可以通过给你的伪元素一个否定的z-index来实现这一点。

请注意，您的 div#three 需要保留默认的 z-index auto。如果你对它应用一个整数，它会创建一个新的stacking context，并且因为它是堆叠上下文的基础，所以没有子元素能够落后。

z-index 实际上并没有大多数人想象的那么简单。 Here's a great article if you're interested.

PSdivs 不是自动关闭的，所以一定要写一个正确的关闭标签。

div {
  width: 100px;
  height: 100px;
  position: absolute;
}

#one {
  top: 0px;
  left: 0px;
  background: red;
}

#two {
  top: 20px;
  left: 20px;
  background: green;
  z-index: 1;
}

#three {
  top: 40px;
  left: 40px;
  background: lightblue;
}

#three::before {
  position: absolute;
  width: 200px;
  height: inherit;
  background: orange;
  content: '3 before';
  top: -20px;
  left: -20px;
  z-index: -1;
}

<div id="one">1</div> 
<div id="two">
  2
  <div id="three">3</div>
</div>

【讨论】：