时间戳

首页 > 解决方案 > 在上面显示一个 DOM 元素元素

html - 在上面显示一个 DOM 元素元素

问题描述

我有一个<progress>元素被用作进度条。我想<div>在进度条顶部显示一些 s，但它们没有出现。如果我使用<div>（带有 jQ​​uery-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>

标签： htmlcss

解决方案

如果我使用（带有 jQ​​uery-ui 进度条）而不是元素，它们就会出现，但如果可能的话，我想避免这种情况。

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

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

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

推荐阅读