为什么 Z-Index 不适用于具有 Transform 的伪元素？

Z 索引不影响外环

尝试使用 CSS 将外环移动到圆后面时，您可能会遇到以下问题： z-index 属性似乎无效。在这种情况下，问题在于将变换属性应用于伪元素。

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

要解决此问题，您需要删除变换属性并用其他定位方法替换它，例如调整顶部和左侧坐标或使用计算值的绝对定位。

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

通过进行这些更改，您应该重新获得对 z-index 属性的控制，并能够有效地将伪元素移动到圆后面正如预期的那样。

以上是为什么 Z-Index 不适用于具有 Transform 的伪元素？的详细内容。更多信息请关注PHP中文网其他相关文章！