在 <progress> 元素上显示 DOM 元素 [重复]答案

【问题标题】：Display a DOM element over <progress> element [duplicate]在 <progress> 元素上显示 DOM 元素 [重复]
【发布时间】：2020-08-01 09:44:29
【问题描述】：

我有一个<progress> 元素用作进度条。我想在进度条顶部显示一些<div>s，但它们没有出现。如果我使用<div>（带有jQuery-ui 进度条）而不是<progress> 元素，它们就会出现，但如果可能的话，我想避免这种情况。有谁知道解决办法吗？

我已经尝试设置z-index: -1，但没有成功。

$(function() {
  $("#progressbar").click(function(event) {
    var posX = $(this).offset().left;
    posX = (event.pageX - posX) / $("#progressbar").width() * 100;
    $("#progressbar").val(posX);
  })
});

.ball {
  background-color: red;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

#progressbar {
  width: 400px;
  height: 50px;
  position: relative;
}

#left-ball {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(25% - 5px);
}

#right-ball {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(75% - 5px);
}

#line {
  position: absolute;
  height: 1px;
  right: 25%;
  background-color: red;
  top: 50%;
  left: 25%;
}

.delete {
  z-index: 10000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <progress id="progressbar" value="50" max="100">
    <div class="delete ball" id="left-ball"></div>
    <div class="delete line" id="line"></div>
    <div class="delete ball" id="right-ball"></div>
  </progress>
</body>

【问题讨论】：

你好，请插入你的html、css和jquery
完成，谢谢提醒
这能回答你的问题吗？ How to display data label inside HTML5 progress bar cross-browser compatible? 在后面的答案中提到 <progress> 是一个被替换的元素，所以它里面的任何东西都被删除了。
可以，谢谢！该死的：（

标签： html css

【解决方案1】：

如果我使用（带有 jQuery-ui 进度条）而不是元素，但我想尽可能避免这种情况。

如果您绝对必须在“进度条”中包含这些元素，您可以选择使用一些自定义标记和 CSS 来实现它。 progress 元素是不可能的，因为它的行为类似于替换元素。它与input 元素不同，例如，progress 元素有一个结束标签。这是利用的。

全局浏览器支持的一种常用技术是，您最初将有一个 progress 元素作为父元素，其中包含一些将由旧浏览器而不是 progress 元素呈现的后备标记。旧浏览器将忽略 progress 元素，因为它根本不支持它。

<progress id="progressbar" value="50" max="100">
  <div id="fallback-progressbar">50%</div>
</progress>

【讨论】：