Control display of DIV after CSS mask on sibling DIV background - html

Question

Am sure that I am doing something stupid, but cannot figure out how to get the contents of a DIV to fully render in front of another DIV that has a masked background.
See sample here: https://jsfiddle.net/pLwbsqjv/
What I am trying to do is to get the circle to fully display in front of the green circle that is a masked background.
The only constraint is that the circle with the number in it cannot be positioned absolutely as needs to have its width / height set on a % basis, eg: percentage of the outer container.
Anyone tell me what I am doing wrong?!
Thanks
body {
background: #252526;
}
.ontop {
margin: -50% 0 0 0;
border-radius: 50%;
width: 22%;
height: 22%;
padding: 10px;
background: rgb(34, 51, 68, .5);
border: 2px solid #def;
color: #def;
text-align: center;
font: 30px Arial, sans-serif;
}
.bounds {
width: 200px;
height: 200px;
}
.color-circle {
-webkit-mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
background-color: #26bf75;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.bottom {
height: 80%;
width: 100%;
}
<div id="bounds" class="bounds">
<div class="bottom">
<div class="color-circle"></div>
</div>
<div class="ontop">01</div>
</div>

Answer 1

You can add position: relative and z-index to .ontop:
body {
margin: 0;
background: #252526;
}
.ontop {
position: relative;
z-index: 1;
margin: -50% 0 0 0;
border-radius: 50%;
width: 22%;
height: 22%;
padding: 10px;
background: rgb(34, 51, 68, .5);
border: 2px solid #def;
color: #def;
text-align: center;
font: 30px Arial, sans-serif;
}
.bounds {
width: 200px;
height: 200px;
}
.color-circle {
-webkit-mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
background-color: #26bf75;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.bottom {
height: 80%;
width: 100%;
}
<div id="bounds" class="bounds">
<div class="bottom">
<div class="color-circle"></div>
</div>
<div class="ontop">01</div>
</div>
Note:
Regarding this comment:
The only constraint is that the circle with the number in it cannot be
positioned absolutely as needs to have its width / height set on a %
basis, eg: percentage of the outer container.
Position absolute would have worked as well. You need to designate the container for the absolutely positioned element. To do so, the container must have any position that is not static. In this example I've added position relative to .bounds:
body {
margin: 0;
background: #252526;
}
.ontop {
position: absolute;
z-index: 1;
margin: -50% 0 0 0;
border-radius: 50%;
width: 22%;
height: 22%;
padding: 10px;
background: rgb(34, 51, 68, .5);
border: 2px solid #def;
color: #def;
text-align: center;
font: 30px Arial, sans-serif;
}
.bounds {
position: relative; /** this sets the container **/
width: 200px;
height: 200px;
}
.color-circle {
-webkit-mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
mask: url('https://perlmaven.com/img/circle.svg') no-repeat center;
background-color: #26bf75;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.bottom {
height: 80%;
width: 100%;
}
<div id="bounds" class="bounds">
<div class="bottom">
<div class="color-circle"></div>
</div>
<div class="ontop">01</div>
</div>