Wie erstellt man ein Overlay, das seinen übergeordneten Container nicht überläuft?

Question

Ich habe 2 Spalten durch 2 Container getrennt.

In der ersten Spalte I ein Element <div class="overlay"></div> gesetzt haben, die und Overlay nur die erste Spalte abdecken sollte.

Ich legte die folgende CSS-Eigenschaft auf die Klasse overlay.

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255,255,255,0.8); 
} 

Es deckt jedoch nicht nur die erste Spalte ab. Es umfasst auch die andere zweite Spalte.

Ich möchte keine feste Breite und Höhe fixieren, weil ich den ganzen Container überlagern möchte. Und ich könnte bald auf Probleme stoßen, wenn ich die Breite fixiere.

Hier ist die sample fiddle von dem, was ich bisher ..

Answer 1

Versuchen Sie, diese CSS Hinzufügen

.container-1{ 
    overflow: hidden; 
    position: relative; 
} 

Demo

Answer 2

Ich bin nicht sicher, was Sie versuchen, mit dem Overlay zu tun. Aber Sie können diesen Code versuchen:

.overlay { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255,255,255,0.8); 
} 

Die relative Position wird sie zwingen, innerhalb des Behälters zu bleiben. Das Problem ist, dass Ihr Overlay nichts enthält, es wird nicht angezeigt.

Dies ist, was ich es zeigen, machen getan - (i. Nur ein Leerzeichen in dem Overlay hinzugefügt)>https://jsfiddle.net/908zodam/