在同级DIV背景上控制CSS蒙版后DIV的显示

Question

确定我在做一些愚蠢的事情，但无法弄清楚如何使DIV的内容完全呈现在具有蒙版背景的另一个DIV之前。

在此处查看示例：https://jsfiddle.net/pLwbsqjv/

我要做的是使圆圈完全显示在蒙版背景的绿色圆圈之前。

唯一的限制是，其中带有数字的圆不能绝对地按需要将其宽度/高度设置为％来定位，例如：外部容器的百分比。

有人告诉我我做错了吗？！ 谢谢

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

您可以将position: relative和z-index添加到.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>

注意：

关于此评论：

  

唯一的限制是其中带有数字的圆不能是   绝对根据需要将其宽度/高度设置为％   基础，例如：外容器的百分比。

绝对位置同样适用。您需要为绝对定位的元素指定容器。为此，容器的位置必须不是static。在此示例中，我将位置relative添加到了.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>