父元素应用CSS scale时伪元素z-index失效问题求助

原始代码 #

HTML #

<div class="container">
  <div class="card"></div>
</div>

（注：已修正原代码中class="card>的引号闭合错误）

CSS #

.container {
  height: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;

  & .card {
    width: 300px;
    height: 120px;
    border: 4px solid #000;
    border-radius: 20px;
    background-color: #fff;
    position: relative;
    transition: scale 250ms ease;

    &:hover {
      scale: 1.1;
    }
    
    &::before {
      content: "";
      position: absolute;
      width: inherit;
      height: inherit;
      transform: translate(10px, 10px);
      background-color: black;
      z-index: -1;
      border-radius: inherit;
    }
  }
}

问题描述 #

预期效果：鼠标悬停.card时，伪元素（黑色阴影）跟着卡片一起缩放，同时保持在卡片下方的层级。之前尝试在.card:hover加z-index:2，同时给.card:hover::before加z-index:-2，但完全没用，求解决办法。

问题根源 #

你之前的操作犯了两个关键错误：

1. 给.card:hover设z-index:2会让卡片创建一个独立堆叠上下文，伪元素的z-index只在这个上下文里生效，不管设成-2还是-1，它都只会在卡片自己的下方，和外部元素的层级无关，这个设置完全多余。
2. 伪元素默认就会继承父元素的transform属性，包括scale，根本不需要额外调整它的z-index来让它跟着缩放。

解决办法 #

情况1：不需要卡片覆盖其他元素 #

直接删掉.card:hover里的z-index设置就行。此时伪元素会自动跟着卡片缩放，且因为z-index:-1，稳稳待在卡片下方，阴影效果正常。

修改后的hover样式：

&:hover {
  scale: 1.1;
  /* 去掉z-index:2 */
}

情况2：需要卡片hover时覆盖其他元素 #

如果必须让卡片hover时层级变高，别只在hover时加z-index，给.card本身加一个默认的z-index（比如z-index:1），伪元素保持z-index:-1不动。这样卡片会创建一个稳定的堆叠上下文，伪元素始终在它下面，hover时缩放也正常继承。

修改后的卡片样式：

& .card {
  /* 其他属性不变 */
  position: relative;
  z-index: 1; /* 给卡片一个默认z-index，创建堆叠上下文 */
  transition: scale 250ms ease;

  &:hover {
    scale: 1.1;
    z-index: 2; /* 可选：hover时再提升层级 */
  }
  
  &::before {
    /* 其他属性不变 */
    z-index: -1; /* 保持这个设置，伪元素就会一直在卡片下面 */
  }
}

核心原理 #

• 父元素的transform（比如scale）会自动作用于它的伪元素，所以伪元素会跟着一起缩放，不用额外配置。
• 当父元素设置了非auto的z-index，会生成独立的堆叠上下文，伪元素的z-index只在这个上下文里算大小。只要伪元素的z-index比父元素小（这里父元素默认是1，伪元素是-1），就会一直显示在父元素下方。

内容的提问来源于stack exchange，提问作者for_loop