Can Pseudo-elements Be Stacked Below Their Parent Element?

Can Pseudo-Element Stacking Order go Below their Parent?

In CSS, :after and :before pseudo-elements appear after and before the content of the associated element. While the default stacking order places pseudo-elements above their parent, certain scenarios demand a reversal.

Problem:

Attempting to set the z-index property of a pseudo-element below that of its parent element often results in it appearing above instead.

Solution:

To place a pseudo-element below its parent, create a new stacking context.

1. Absolute Positioning: Setting the pseudo-element to position: absolute establishes a new stacking context, enabling z-index control.
2. Z-Index Assignment: Assign a z-index value lower than the parent's z-index to position the pseudo-element below it.

Example:

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

This approach provides fine-grained control over the stacking order, enabling you to achieve the desired position of pseudo-elements relative to their associated parent.

The above is the detailed content of Can Pseudo-elements Be Stacked Below Their Parent Element?. For more information, please follow other related articles on the PHP Chinese website!