父元素使用transform会使子元素和伪元素的z-index失效

伏玉.

已于 2024-05-03 15:34:48 修改

阅读量532

点赞数 8

分类专栏：前端文章标签： css css3 前端

于 2024-05-02 18:59:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_73993347/article/details/138397333

版权

文章探讨了在CSS中，当父元素具有transform属性时，子元素的z-index可能失效。实验表明，z-index只在非static的position属性且没有transform影响的元素层级结构中有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，要想使用z-index属性，则元素的position属性必须不为static

我有两个div元素，.box元素具有transform属性，.son元素具有z-index:-1;属性

代码如下：

  <style>
    .box{
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #f27979;
      transform: translateX(100px);
    }
    .son{
      position: absolute;
      top:25%;
      width: 300px;
      height: 100px;
      background-color: #35bcfa;
      z-index: -1;
    }
  </style>

  <div class="box">
    box
    <div class="son">son</div>
  </div>

浏览器效果如下图

显然，.son元素的z-index失效了