Why Doesn\'t Z-Index Work on Pseudo-Elements with Transform?

Z-Index Not Affecting Outer Ring

When attempting to move an outside ring behind a circle using CSS, you may encounter an issue where the z-index property seems ineffective. In this case, the problem lies with the transform property being applied to the pseudo-elements.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  transform: rotateX(66deg) rotateY(170deg);
}</code>

To address this, you need to remove the transform property and replace it with alternative positioning methods, such as adjusting the top and left coordinates or using absolute positioning with calculated values.

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  top: calc(10px - var(--size) / 4);
  left: calc(-80px - var(--size) / 4);
}</code>

By making these changes, you should regain control over the z-index property and be able to effectively move the pseudo-element behind the circle as intended.

The above is the detailed content of Why Doesn\'t Z-Index Work on Pseudo-Elements with Transform?. For more information, please follow other related articles on the PHP Chinese website!