绝对div中的绝对div

Question

我正在尝试创建一个如下所示的倒计时：

倒计时包括四个部分：

• 底部的地图（暗处）
• 用于文本的白色容器（这是svg）；
• 实际剩余时间；
• 描述金额的文字。

我面临的问题是文本没有显示在白色容器的顶部。这是由于以下事实：我在文本上使用了::before标签，而在z-index: -1上却不能使用::before，因为它随后会进入地图后面。

因此，我被迫使用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>

Scss：

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>

Scss：

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

  

并且我不能在z-index: -1上使用::before，因为它随后将进入地图的后面

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

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

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

Answer 2

您是否尝试过使用弹性盒？

.holder-thing {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  background: grey;
  height:100px;
  width:200px;
}

.white-box {
  width: 40px;
  height: 60px;
  background:white;
  
}

.number-thing {
  justify-content:center;
  display: flex;
  margin: 4px 4px;
  flex-direction: column;
}

<div class='holder-thing'>
  <div class='number-thing'>
    <div class='white-box'></div>
    <div class='number-thing-text'>
      <p>text</p>
    </div>
  </div>
  <div class='number-thing'>
    <div class='white-box'></div>
    <div class='number-thing-text'>
      <p>text</p>
    </div>
  </div>
  <div class='number-thing'>
    <div class='white-box'></div>
    <div class='number-thing-text'>
      <p>text</p>
    </div>
  </div>
</div>