CSS Z-index默认值与显式设0的差异及背景遮罩疑问

嘿，这个问题其实戳中了CSS堆叠上下文（stacking context）的一个容易混淆的点，咱们一步步把它捋明白：

疑问1：为何默认z-index:auto和显式设z-index:0效果完全不同？ #

这核心差别在于是否创建独立的堆叠上下文：

• 当元素的z-index为auto时，它不会触发创建自己的堆叠上下文。此时它的子元素（包括::before伪元素）的z-index是相对于根元素（html）的堆叠上下文来计算的。你的伪元素设了z-index:-1，就会被放到根堆叠上下文的最底层，而按钮本身作为普通流元素，在根上下文里的层级是默认的0级，按钮的背景色会直接覆盖掉底层的伪元素，所以你看不到伪元素的效果。
• 当你给按钮显式设置z-index:0时，按钮会立刻创建一个属于自己的独立堆叠上下文。这时伪元素的z-index:-1是相对于按钮的堆叠上下文来生效的，它会被放在这个上下文的底层，但不会跑到根上下文的最底层去，所以能被显示出来。

疑问2：z-index:-1的伪元素为何能“替换”背景却不遮挡文字？ #

这要说到堆叠上下文内部的绘制顺序（从下到上）：

1. 堆叠上下文元素自身的背景和边框
2. 该上下文内所有z-index为负的子元素（包括伪元素）
3. 普通流、非定位的子元素（比如按钮里的文字）
4. 浮动元素
5. 定位但z-index:auto的子元素
6. z-index为正的子元素

当按钮创建了自己的堆叠上下文后，伪元素处于第2层，按钮的文字处于第3层，所以伪元素会显示在按钮背景的上方、文字的下方——既实现了背景填充的视觉效果，又不会遮挡文字。

核心代码解析 #

下面是关键的CSS代码，我标了核心逻辑：

.btn { 
  position: relative; 
  z-index: 0; /* 关键：显式设0，触发创建独立堆叠上下文 */
  border: 0; 
  padding: 15px 20px; 
  background-color: lightgrey; 
  cursor: pointer; 
  color: white; 
  &::before { 
    content: ""; 
    position: absolute; 
    z-index: -1; /* 相对于父堆叠上下文处于底层 */
    top: 0; 
    left: 0; 
    width: 0; 
    height: 100%; 
    background-color: dimgrey; 
    transition: .5s; 
  } 
  &:hover::before { 
    width: 100%; 
  } 
}

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