Question

在我的法典中,我想把红色圈放在黑箱内,但放在正文下。问题在于我添加<条码>译文:翻译Z(0px);至黑箱,我的<条码>z-index:2;。在我的案文上,特别安全局的工作更没有进展。我不禁要问的是,哪怕发生转变,就有一个东西可以站在另一边。无论Z空间如何,我都希望案文出现在红色圈子上。

I was wondering if there is something more powerful than z-index I can use on the text without adding an extra div or anything.

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

Put The 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 class="red-box"></div>
</div>

友情链接