css已转换的子z-index不起作用

Question

这是工作example，它可以重现问题。

我有一个overlay div，它是transformed div的兄弟。我希望transformed div的孩子堆叠在overlay div上。 以下是一些代码段：

.overlay {
  position:fixed;
  height:100%;
  width:100%;
  background: rgba(0, 0, 0, .5);
  z-index: 2;
  top: 0;
  left: 0;
}
// transformed div
.parent {
  width: 200px;
  height: 200px;
  border: 3px solid violet;
  transform: translate(20px, 50px);
  display: flex;
  position: relative;
}

.child {
  margin: auto;
  width: 50px;
  height: 50px;
  background: yellow;
  z-index: 10; // doesn't work
  position: relative;
}

我怎样才能做到这一点？

Answer 1

是否有理由需要使用transform：translate？使用top：50px;左：20px;相反，将.parent DIV保留在与.overlay相同的上下文中，允许您在叠加层上方重新排序.child。