Z-index 和背景叠加

Question

我有一个带有背景颜色的按钮，当我在它上面使用 hover 时，它会用不同的背景颜色和 z-index 填充覆盖伪元素，并且 z-index 会产生某种误解：

默认情况下，每个人的 z-index 都是自动的，但正如我在另一个答案中读到的那样，“任何元素的默认 z-index 都是 'auto'，但 html 标记的默认 z-index 除外：0。'Auto' 表示该元素从其父级获取 z-index。 "，即 0。

这意味着当您在相对按钮上进行 hover 时，绝对位于其中的伪元素与其自身重叠，因为它在代码中的位置较低。 如果我设置了伪元素z-index -1，它超出了父按钮并且不可见，因为没有设置按钮z-index，但默认是auto，即0，大于-1。

但随后我明确设置按钮 z-index: 0 突然覆盖开始填充 hover 上按钮的背景，但按钮本身的签名是可见的。

其实我不明白：

1. 如果 z-index 默认为 0，为什么显式设置为 0 会发生变化？

2. 如果 z-index 为 -1 且按钮为 0（尽管 1/2 / etc 确实具有相同的效果），叠加层如何将其背景颜色推送到按钮，但不触及签名？ z-index 较小的元素如何选择性地影响它前面的元素，替换背景颜色但不接触签名？

代码链接：

https://jsfiddle.net/Solow/pv9x8zeq/39/

.btn {
  position: relative;
  z-index: 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%;
  }
}

Answer 1

这是因为伪元素在内容之前或之后，但在元素内部。 查看此 文档：

正如它们的名字所示，:before 和:after 伪元素指定了元素文档树内容之前和之后的内容位置。

注意这句话末尾的关键短语，它指的是内部内容（或内部文本）。 因此，伪元素插入到指定元素内容的开头或结尾。

在这里，您有一个元素顺序。：

button
    button::before
    content
    button::after