Html 绝对div中的中心绝对div

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

倒计时由4部分组成：

• 一张地图作为底部（那个黑暗的部分）
• 文本的白色容器（这是svg）
• 实际剩余时间
• 描述金额的文本

我面临的问题是文本没有显示在白色容器的顶部。这是因为我在文本上使用了

：：before

标记，并且我不能在

：：before

上使用

z-index:-1

，因为这样它会在地图后面

因此，我不得不使用两个单独的div，并将文本对齐到白色容器的顶部

---

代码

当前代码如下所示：

HTML:

上面的代码生成了倒计时图像，但问题是文本隐藏在

span:：before

后面

---

我已经试过了

我尝试使用2个绝对div。这适用于1个数字，但它不能很好地相邻对齐。下面的每个数字都堆叠在最后一个数字的顶部。此外，我似乎无法将文本居中放置在容器顶部

HTML:

---

因此，我不知道有更多或更好的选项可以将两个div相互对齐，并使其他数字相邻对齐（如图所示）

---

更新

---

一支简单的代码笔显示了我的问题：

你试过使用flex box吗？

.holder东西{
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
背景：灰色；
高度：100px；
宽度：200px；
}
.白盒子{
宽度：40px；
高度：60px；
背景：白色；
}
.数字事物{
证明内容：中心；
显示器：flex；
保证金：4px4px；
弯曲方向：立柱；
}

正文

正文

正文

我不能在

：：之前使用
z-index:-1
，因为它会在地图后面

如果您首先将
span
元素本身“提升”到更高的
z索引上，则易于修复：

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

请共享一个codepen或fiddle URL来帮助您。“我不能在：：上使用z-index:-1，因为它会在地图后面”-即使您先将span元素本身提升到更高的z-index上…？@misorude，您能解释一下这是什么意思吗？当使用
z-index:-1
时，添加具有较高
z-index
的父div将使span元素位于父div后面？不，只需给出span
位置：相对；z指数：1
..@misorude，将上面的代码添加到span中不幸无法解决此问题。请参阅：。我认为问题在于这样一个事实：a
：：before
只能设置在所选div后面，z-index:-1
或者我在这一点上错了吗？编辑：将
z-index:2
添加到
span
和
z-index:1
添加到
span:：before
也无法解决此问题
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;
}

<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;
  }
}

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