如何在绝对划分上显示相对划分？

Question

有两个部门 class 名称为 a 和 b。

.a {
  height: 120px;
  width: 120px;
  background: #E08027;
  border-radius: 50% 50% 10px 10px;
  position: relative;
}

.b {
  position: absolute;
  height: 49px;
  width: 49px;
  background: #F2AD43;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="a">
  <div class="b"></div>
</div>

我想隐藏分区b 超过分区a 的部分，同时显示其余部分。 *z-index 不工作。

Answer 1

您可以在子元素上使用 z-index: -1; :

提供有关堆叠顺序的有趣信息。

.a {
  height: 120px;
  width: 120px;
  background: #E08027;
  border-radius: 50% 50% 10px 10px;
  position: relative;
}

.b {
  position: absolute;
  height: 49px;
  width: 49px;
  background: #F2AD43;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

<div class="a">
  <div class="b"></div>
</div>

如何在绝对划分上显示相对划分？

How to show relative division over absolute division?

css

frontend