Overlay div mit Position absolut und Höhe 100% bewegt sich nicht mit der Rolle

Question

Bitte sehen Sie here und klicken Sie auf die Schaltfläche "Ein".

.darkClass 
{ 
    background-color: white; 
    filter:alpha(opacity=90); /* IE */ 
    opacity: 0.9; /* Safari, Opera */ 
    -moz-opacity:0.9; /* FireFox */ 
    z-index: 2000; 
    height: 100%; 
    width: 100%; 
    background-repeat:no-repeat; 
    background-position:center; 
    position: absolute; 
    top: 0; 
    left: 0; 

}

Sie werden sehen, dass die Overlay-div den gesamten Bildschirm bedeckt, wie gewünscht, aber wenn ich scrollen es nicht mit dem Scrollen bewegt, wie erwartet.

Ich möchte die graue Überlagerung mit meinem Scrollen bewegen sehen.

was fehlt mir hier CSS-weise?

Answer 1

Sie sollten position: fixed statt position: absolute verwenden.

Das Element wird relativ zum Browserfenster positioniert und nicht relativ zum ersten (nicht statischen) Vorgängerelement.

Answer 2

Um das Overlay oben bleiben zu lassen, verwenden Sie die Position: fixed. Die Höhe hängt von der Größe des Bildschirms ab, nicht vom Inhalt. Ihr Overlay füllt also den gesamten Bildschirm, aber nicht den vollständigen Inhalt