如何让<p>标签内容显示在<progress>标签上方？UI布局求助

需要将显示参赛人数的红色文字置于<progress>标签上方作为说明，当前设置z-index未生效，也可接受不使用<p>标签的实现方案。

原始代码 #

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

问题根源 #

z-index仅对非static定位的元素生效，当前.playerNumber是默认的position: static，所以设置z-index不会起作用；另外用负margin定位容易导致布局混乱，引发元素重叠冲突。

解决方案 #

方案一：修复现有代码 #

给.playerNumber添加定位属性，让z-index生效，同时调整位置确保在进度条正上方：

.playerNumber {
  text-align: left;
  color: red;
  margin-left: 30%;
  margin-top: -50px;
  z-index: 200;
  /* 添加相对定位，触发z-index生效 */
  position: relative;
  /* 若需更精准定位，可替换为绝对定位 */
  /* position: absolute;
  top: 70px;
  left: 30%; */
}

方案二：重构HTML结构（更推荐） #

将参赛人数与进度条放入同一容器，用相对+绝对定位实现文字覆盖，结构更清晰，避免负margin问题：

修改后的HTML

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

修改后的CSS

.tournament {
  background-color: #202020;
  width: 98%;
  margin-left: 1%;
  margin-top: 15px;
  height: 121px;
  /* 添加相对定位，作为内部绝对定位元素的参考基准 */
  position: relative;
}

.tournament p {
  text-align: left;
  position: absolute;
  margin-top: 48px;
  margin-left: 20px;
}

.tournament button {
  /* 改用绝对定位避免布局偏移 */
  position: absolute;
  right: 1%;
  top: 43px;
  border-radius: 100px;
  width: 135px;
  height: 35px;
  border-color: #666666;
}

/* 新增进度条容器，包裹进度条和文字 */
.progress-container {
  position: relative;
  display: inline-block;
}

.tournament progress {
  border-color: #666666;
  background-color: #202020;
  width: 285%;
  height: 45px;
  /* 移除原absolute定位，由容器控制位置 */
}

progress::-moz-progress-bar { background: #151515; }
progress::-webkit-progress-value { background: #151515; }
progress { color: #151515; }

.playerNumber {
  color: red;
  /* 绝对定位在进度条上方并居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* 可选：添加文字阴影增强可读性 */
  text-shadow: 0 0 2px #000;
}

调整后，参赛人数文字会精准居中显示在进度条上方，布局更稳定，不会再出现z-index失效的问题。

内容的提问来源于stack exchange，提问作者Sakura Queen