Html css转换的子z索引不'；行不通

这里的工作，这再现了问题

我有一个

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;
}

---

如何实现这一点？

您需要使用transform:translate的原因是什么？使用top:50px；左：20px；而是将.parent DIV保留在与.overlay相同的上下文中，允许您在overlay上方重新排序其.child。

您需要在此处显示示例标记，而不是明天可能消失或更改的第三方站点，这对将来的任何人都没有帮助。可能在两分钟内重复两个错误！谢谢社区的支持！是的，对我来说，翻译是强制性的。我创建了一个简化的示例，但在实际应用中，我有一个可拖动的网格系统。