如何将标签放在<p>标签的前面<progressbar>

Question

我想做一些UI设计，但遇到了一个小问题。基本上，标签应该是

标签的背景——它只是红色的，这样可以更容易地找到它。

屏幕截图

HTML代码：

<div class="tournament">
<p>
&lt;GET system.template.tournament.date&gt; <progress id="value" max="8"></progress>
</p>
<button>Information</button>
</div>
<p class="playerNumber">
<span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
</p>

CSS代码：

.tournament {
background-color: #202020;
width: 98%;
margin-left: 1%;
margin-top: 15px;
height: 121px;
}
.tournament p {
text-align: left;
position: absolute;
margin-top: 48px;
margin-left: 20px;
}
.tournament button {
margin-left: 90%;
margin-top: 43px;
border-radius: 100px;
width: 135px;
height: 35px;
border-color: #666666;
}
.tournament progress {
border-color: #666666;
background-color: #202020;
width: 285%;
height: 45px;
position: absolute;
margin-top: -10px;
margin-left: 80%;
}
progress::-moz-progress-bar { background: #151515; }
progress::-webkit-progress-value { background: #151515; }
progress { color: #151515; }
.playerNumber {
text-align: left;
color: red;
margin-left: 30%;
margin-top: -50px;
z-index: 200;
}

基本上，p元素显示了一些与进度条相关的信息。在这种情况下，它说"；4/8玩家在"；这是比赛的裁判。这就是进度条已满50%的原因。

如果你有一个没有

-标签的解决方案，但允许我在进度条上写一些东西，这不是问题。

我为什么在这里问

1. z-index没有解决我的问题，正如你在代码中看到的那样
2. 我在这个论坛上没有找到问题的答案
3. 谷歌也没有任何线索

Answer 1

您需要将.playerNumber元素放入.tournament元素中。

只需使用.playerNumber元素的top、leftcss道具来调整位置。。。

那么你需要这个css和。。。

.playerNumber {
text-align: left;
color: red;
left: 300px;
top: 10px;
z-index: 3;
display:block;
}

.tournament progress {
border-color: #666666;
background-color: #202020;
width: 285%;
height: 45px;
position: absolute;
margin-top: -10px;
margin-left: 0px;
z-index: 2;
}

和类似的html

<div class="tournament">
<p>
&lt;GET system.template.tournament.date&gt; <progress id="value" max="8"></progress>
</p>
<button>Information</button>

<p class="playerNumber">
<span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
</p>
</div>

在此处测试