我有一个<progress>元素用作进度条。我想在进度条顶部显示一些<div>，但它们没有显示。如果我使用<div>(带有jQuery ui progressbar(而不是<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>如果我使用(带有jQuery ui progressbar(而不是元素，但如果可能的话，我想避免这种情况。
如果你绝对必须在一个"；进度条"；，你可以选择使用一些自定义标记&CSS来实现它。使用progress元素是不可能的，因为它的行为就像被替换的元素。它与input元素的不同之处在于，例如，progress元素具有结束标记。这被利用了。
全局浏览器支持的一种常见技术是，最初将有一个progress元素作为父元素，其中有一些回退标记，将由较旧的浏览器而不是progress元素呈现。旧的浏览器将忽略progress元素，因为它根本不支持它
<progress id="progressbar" value="50" max="100">
<div id="fallback-progressbar">50%</div>
</progress>