Question

当我将变换应用于元素时，我发现了一个有线的东西，它改变了z-index顺序，代码为：

<button class="test">
  click me
</button>

的CSS：

.test{
  border-radius:100px;
  transition:all 1s;
  position:relative;
}

.test:hover{
  transform:translateY(30px);
}

.test::after{
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  background:blue;
  width:100%;
  height:100%;
}

codepen：https://codepen.io/JianNCI/pen/jZQRpz?editors=1100

我打算将:: after content by setting the z-index顺序隐藏到-1，我设置蓝色背景颜色以区分它们。但是一旦我徘徊在按钮上，隐藏内容就会与按钮重叠。所以我的问题是：

为什么z-index:-1在我悬停时不起作用？它应该保持为-1，因为我只在悬停效果中设置了转换属性。
当我替换像transform这样的color: red属性时，它可以正常工作。所以我想知道transform是否会导致z-index:-1在这种情况下失去效果？

css转换会改变z-index属性吗？

0 个答案: