Bootstrap Fortschrittsbalken mit Position gegangen festen

Question

Wenn ich den Fortschrittsbalken mit einem div wickeln, die position: fixed der Fortschrittsbalken hat, ist einfach weg:

.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>

Wie kann ich das Problem lösen?

Answer 1

Über positioning vom Mozilla Developer Guide:

• ein absolut positioniertes Element ist ein Element, dessen berechnete Positionswert ist oder absolute fixiert.
• In den meisten Fällen sind absolut positionierte Elemente, bei denen Höhe und Breite auf auto eingestellt sind, so groß, dass sie ihren Inhalten entsprechen. Es können jedoch nicht ersetzte, absolut positionierte Elemente erstellt werden, um den verfügbaren vertikalen Raum zu füllen, indem Ober- und Unterkante angegeben werden und die Höhe nicht angegeben wird (d. H. Automatisch). Sie können ebenfalls dazu gebracht werden, den verfügbaren horizontalen Raum zu füllen, indem sie sowohl links als auch rechts angeben und die Breite als automatisch belassen.

So ist Ihr Fortschrittsbalken da aber mit Null Breite. Gib ihm eine Breite und es wird sichtbar.

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