There are two divisions with class name a and 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>I want to hide the part of division b which is over division a while show the rest.
*z-index is not working.
>Solution :
You could use z-index: -1; on the child element :
This answer provides interesting informations about the stacking order.
.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>