html - 在绝对 div 中居中绝对 div

Question

我正在尝试创建如下所示的倒计时:

倒计时由 4 个部分组成:

• map 作为底部(黑暗部分)；
• 文本的白色容器(这是一个 svg)；
• 实际剩余时间；
• 描述金额的文本。

我面临的问题是文本没有显示在白色容器的顶部。这是因为我在文本上使用了 ::before 标签，而我不能在 ::before 上使用 z-index: -1 因为它会落后于 map 。

所以我不得不使用 2 个单独的 div 并将文本对齐到白色容器的顶部。

---

代码

当前代码如下所示:

HTML:

<div>
  <span>{{countdown.days | slice:0:1}}</span>
  <span>{{countdown.days | slice:1:2}}</span>
  <span>{{countdown.days | slice:2:3}}</span>
  <p>{{"COUNTDOWN.DAYS" | translate}}</p>
</div>

科学:

span {
  padding: 8px 4px;
  display: inline-block;
  font-size: $font-size-xl;
  color: $font-secondary-color;

  &:not(:first-child) {
    margin-left: 0.2em;
  }
}

span:not(.indicator)::before {
  content: "";
  background: url(../../../assets/img/counters/counterContainer.svg) no-repeat;
  background-size: contain;
  position: absolute;
  width: 24px;
  height: 44px;
  margin-left: -5px;
  // z-index: -1;
  margin-top: -2px;
}

p {
  text-align: center;
  color: $orange-light;
  font-weight: $font-weight-normal;
}

上面的代码产生了倒计时的图像，但问题是文本隐藏在 span::before 后面。

---

我试过了

我曾尝试使用 2 个绝对 div。这适用于 1 个数字，但彼此之间的对齐效果不佳。接下来的每个数字都堆叠在最后一个数字之上。此外，我似乎无法将文本置于容器顶部。

HTML:

<div>
   <p>0</p> <!-- The time left -->
   <span></span> <!-- The white container -->
</div>

科学:

div {
  position: relative;
  display: inline-block;

  p {
   position: absolute;
   display: inline-block;
   z-index: 2;
  }

  span {
   content: "",
   background: url(../../../assets/img/counters/counterContainer.svg) no-repeat;
   background-size: contain;
   position: absolute;
   width: 24px;
   height: 44px;
  }
}

---

因此，我不知道有任何更多或更好的选项可以将两个 div 彼此对齐并使其他数字彼此相邻对齐(如图所示)。

---

更新

显示我的问题的简单代码笔:CodePen

Answer 1

and I cannot use z-index: -1 on the ::before because it would then go behind the map

如果您先将 span 元素本身“提升”到更高的 z-index 上，则很容易修复:

span {
  position: relative;
  z-index: 1;
}

https://codepen.io/anon/pen/KGBJam