Bootstrap progress bar gone with position fixed

Question

When I wrap the progress bar with a div that has position: fixed the progress bar is just gone:

.volume {
  position: fixed;
  top: 10px;
  left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="volume">
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

How can I fix that?

Answer 1

About positioning from the Mozilla Developer guide:

• An absolutely positioned element is an element whose computed position value is absolute or fixed.
• Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto.

So your progress bar is there but with zero width. Give it a width and it will become visible.

.volume {
    position: fixed;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
}