css :before moves behind the parent of the parent element (z axis)

Question

I read this article which shows how to display the :before behind the parent (in the 3rd dimension).

#element {

position: relative;  /* optional */
width: 100px;
height: 100px;
background-color: blue;
}

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

/* create a new stacking context */
position: absolute;
z-index: -1;  /* to be below the parent element */
}

This works great as long as the parent element is not in another element.

I created a container with a transparent-white ( rgba(255,255,255,.6) ) background and put the element inside it.

The :before then was behind the container.

But when i add a posotive z-index to the parent of the :before, the :before will move in front of the parent, but the content (text) of the aprent will be still visible. This is confusing me so extreme, because the text shouldn't be visible behind an element (:before) without a transparent background.

The questions is: How make the parent and :before work inside a container same as outside?

#container {
  padding: 20px;
 background-color:rgba(150,150,150,.8);
}
#element {

position: relative;  /* optional */
width: 100px;
height: 100px;
background-color: blue;
}

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

/* create a new stacking context */
position: absolute;
z-index: -1;  /* to be below the parent element */
}

<div id="container">
  <div id="element"></div>
</div>

score 0 · Accepted Answer · answered Sep 18 '17 at 15:40

You can apply position: relative; and z-index: 1; to the container:

#container {
  padding: 20px;
  background-color: rgba(150, 150, 150, .8);
  position: relative;
  z-index: 1;
}

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

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;
  left: 0px;
  position: absolute;
  z-index: -1;
}

<div id="container">
  <div id="element"></div>
</div>

css :before moves behind the parent of the parent element (z axis)

1 Answers1