即使元素上有变换修饰符，如何使 z-index 成为绝对值？

Question

在我的代码片段中，我想让红色圆圈出现在黑框上方但文本下方。问题是当我将

transform: translateZ(0px);

添加到黑框时，文本上的

z-index: 2;

CSS 不再起作用。我想知道是否有办法让一件事物出现在另一件事物之上，即使它们正在转变。就像无论每个元素位于哪个 Z 空间中，我都希望文本出现在红色圆圈的顶部。

我想知道是否有比

z-index

更强大的东西我可以在文本上使用而不添加额外的div或任何东西。

body {
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.black-box {
  width: 200px;
  height: 150px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0px);
  border-radius: 20px;
}

.black-box p {
  font-size: 30px;
  z-index: 2;
}

.red-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  transform: translateX(-40px);
  z-index: 1;
  border-radius: 100%;
  opacity: 75%;
}

<div class="black-box">
  <p>hello</p>
</div>
<div class="red-box"></div>

Answer 1

将

red-box

类放入

black-box

类中

body {
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.black-box {
  width: 200px;
  height: 150px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0px);
  border-radius: 20px;
}

.black-box p {
  font-size: 30px;
  z-index: 2;
}

.red-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  transform: translateX(-40px);
  z-index: 1;
  border-radius: 100%;
  opacity: 75%;
}

<div class="black-box">
  <p>hello</p>
</div>
<div class="red-box"></div>

body {
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.black-box {
  width: 200px;
  height: 150px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0px);
  border-radius: 20px;
}

.black-box p {
  font-size: 30px;
  z-index: 2;
}

.red-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  transform: translateX(-40px);
  z-index: 1;
  border-radius: 100%;
  opacity: 75%;
}

<div class="black-box">
  <p>hello</p>
</div>
<div class="red-box"></div>

body {
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.black-box {
  width: 200px;
  height: 150px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateZ(0px);
  border-radius: 20px;
}

.black-box p {
  font-size: 30px;
  z-index: 2;
}

.red-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  transform: translateX(-40px);
  z-index: 1;
  border-radius: 100%;
  opacity: 75%;
}

<div class="black-box">
  <p>hello</p>
  <div class="red-box"></div>
</div>