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

问题

EDIT: I found out that when I delete the z-index of the parent element it works. Anyway ... is there a less "hackish" way to accomplish all that? It works but really feels very hackish.

I try to make a full width pseudo element behind a centered 50% row. It works fine (code looks very hackish, though) but I can't get the pseudo elements z-index behind its parent:

> Visit codepen-battleground here.

This is the SCSS code:

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;
    }
}

Is there a trick to do this? I'd love to get this working.

回答1:

If you remove z-index on the parent it works.

I also changed the centering solution so the overflow scroll on the body can be removed.

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>

来源：https://stackoverflow.com/questions/36505862/full-width-background-element-with-pseudo-class-z-index

标签

css

pseudo-element