带有伪 class - z-index 的全宽背景元素？

Question

编辑： 我发现当我删除父元素的 z-index 时它起作用了。不管怎样……有没有一种 less "hackish" 的方法可以完成这一切？它有效，但真的感觉很黑。

我尝试在居中的 50% 行后面制作一个全宽伪元素。它工作正常（虽然代码看起来很老套）但我无法在其父项后面获取伪元素 z-index:

这是 SCSS 代码：

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.content {
  background-color: blue;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 50%;
  z-index: 1;
  padding: 2em;

  &:after {
        content: "";
        display: block;
        height: 100%;
        left: -50vw;
        opacity: .7;
        position: absolute;
        right: 0vw;
        top: 0;
        width: 200vw;
        z-index: -1;
        border: 10px solid green;
        box-sizing: border-box;
        background-color: tomato;
    }
}

有什么技巧吗？我很想让它工作。

Answer 1

如果您删除 parent 上的 z-index，它会起作用。

我还更改了居中解决方案，因此可以删除 body 上的溢出滚动。

html, body {
  height: 100%;
  margin: 0;
}
.content {
  background-color: blue;
  margin: 0 auto;
  position: relative;
  width: 50%;
  padding: 2em;
}
.content:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  opacity: .7;
  box-sizing: border-box;
  background-color: tomato;
}

<div class="content">
  <strong>This should go to front so it's <em>blue</em> not lilac</strong> - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

带有伪 class - z-index 的全宽背景元素？

Full width background element with pseudo-class - z-index?

css

pseudo-element