Pseudo elements get hidden when parent uses background

Question

When I apply a :before or :after pseudo element, this one gets hidden if the parent element uses a background.

You can notice that on this picture, where the red elements gets hidden behind the yellow background. Unlike its parent, the blue element.

.parent {
  background: yellow;
}

#element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 4px solid black;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;

  position: absolute;
  z-index: -1;
  border: 4px solid black;
}

<div class="parent">
  <div id="element"></div>
</div>

Reproduction online: https://jsfiddle.net/subkrovy/

Any way to go around this?

Do you want the blue square with the red angle to be above the yellow background? — AStombaugh, Jun 08 '22 at 17:55
The blue element is already above it. It's just its pseudo-element that is not. But yeah, red should be above. — Alvaro, Jun 08 '22 at 17:57
Does this answer your question? [Is it possible to set the stacking order of pseudo-elements below their parent element?](https://stackoverflow.com/a/9072467/864233) — romellem, Jun 08 '22 at 18:45

AStombaugh · Accepted Answer · 2022-06-08T18:34:24.490

1

You could translate the parent in the negative z axis. I'm not sure if that's an option for your overall project but in this context, it works.

.parent {
  background: yellow;
  transform: translateZ(-1px)
}

#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 */
}

<div class="parent">
  <div id="element"></div>
  <div id="yellow"></div>
</div>

z-index edition because why not:

.parent {
  background-color: yellow;
  width: 100%;
  position: absolute;
  z-index: -2;
}

#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 */
}

<div class="parent">
  <div id="element"></div>
  <div id="yellow"></div>
</div>

edited Jun 08 '22 at 18:34

answered Jun 08 '22 at 18:04

AStombaugh

2,930
5
13
31

Interesting! Why did you use `transform` with `translateZ` instead of `z-index`? z-index seems to cause issues with inputs, but not translateZ. – Alvaro Jun 08 '22 at 18:07
@Alvaro I updated my answer. Looks like you *can* use z-index on the parent if you use position: absolute and a defined width. So I guess pick whichever works best for you – AStombaugh Jun 08 '22 at 18:34
1

@Alvaro you don't need a negative z-index on the parent, any z-index will do the job even a positive one – Temani Afif Jun 08 '22 at 19:52
@TemaniAfif Yeah I guess it doesn't matter, you could even use 0. Looks like relative position works too – AStombaugh Jun 08 '22 at 20:18
@TemaniAfif uh wow, that's interesting... why is it? Seems to be working! – Alvaro Jun 09 '22 at 00:37
1

@Alvaro read the duplicate to understand the concept of stacking context – Temani Afif Jun 09 '22 at 08:10

Pseudo elements get hidden when parent uses background

1 Answers1