如何显示相对除法而非绝对除法

Question

有两个类名为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中超过分区的部分，同时显示其余部分。*z索引不起作用。

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>