How to show relative division over absolute division?

0

Issue

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>

Answered By – Tom

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More