我正在尝试创建如下所示的倒计时:
倒计时由 4 个部分组成:
- map 作为底部(黑暗部分);
- 文本的白色容器(这是一个 svg);
- 实际剩余时间;
- 描述金额的文本。
我面临的问题是文本没有显示在白色容器的顶部。这是因为我在文本上使用了 ::before
标签,而我不能在 ::before 上使用
因为它会落后于 map 。 z-index: -1
所以我不得不使用 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
最佳答案
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;
}
关于html - 在绝对 div 中居中绝对 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52927340/