css - 具有伪类的全宽背景元素 - z-index？

Question

编辑: 我发现当我删除父元素的 z-index 时它起作用了。无论如何......是否有一种不那么“骇人听闻”的方式来完成这一切？它有效，但真的感觉很老套。

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

> Visit codepen-battleground here.

这是 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

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

我还更改了居中解决方案，以便可以删除主体上的溢出滚动。

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>