Display a DOM element over element

Question

I have a <progress> element being used as a progress bar. I would like to display some <div>s on top of the progress bar, but they do not appear. They appear if I use a <div> (with jQuery-ui progressbar) instead of the <progress> element, but I would like to avoid this if possible. Does anyone know of a solution?

I have already tried setting z-index: -1, which did not work.

$(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>

Does this answer your question? [How to display data label inside HTML5 progress bar cross-browser compatible?](https://stackoverflow.com/questions/41429906/how-to-display-data-label-inside-html5-progress-bar-cross-browser-compatible) Later in the answer it mentions that `` is a replaced element, so anything inside it is removed. — Billy Brown, Jul 31 '20 at 22:02

95faf8e76605e973 · Accepted Answer · 2020-07-31T23:44:16.037

They appear if I use a (with jQuery-ui progressbar) instead of the element, but I would like to avoid this if possible.

If you absolutely must have these elements inside of a "progress bar", you may opt to use some custom markup & CSS to achieve it. It is not possible with a progress element because it behaves like a replaced element. It differs from the input element though, for example, in that the progress element has a closing tag. This is taken advantage of.

A common technique for global browser support is that you would initially have a progress element as a parent and inside of it is some fallback mark up that will be rendered by older browsers instead of the progress element. The old browsers will ignore the progress element because it simply does not support it.

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

Display a DOM element over element

1 Answers1