Absolute Position für Kind, wenn Eltern Float verwenden

Question

Ich mache eine Einrichtung, wo zwei Bilder und ein Text-Container nebeneinander sind mit Float links, aber ich brauche auch eine Overlay-Div mit etwas Text, wenn der Benutzer über schwebt, aber Dies unterbricht die Anzeige.

Hier ist mein HTML-Code:

<div class="container"> 
    <div class="parent-container"> 
    <div class="child-container"> 
     <img src="http://blog.hdwallsource.com/wp-content/uploads/2016/02/solid-color-wallpaper-21953-22506-hd-wallpapers.jpg" alt="" /> 
     <div class="overlay"> 
     <p>Some text</p> 
     </div> 
    </div> 
    <div class="child-container"> 
     <img src="http://www.pixelstalk.net/wp-content/uploads/2016/06/Solid-Color-HD-Wallpapers-For-Desktop-768x432.jpg" alt="" /> 
    </div> 
    <div class="child-container-text"> 
     <p>hhohdoioadoasabs</p> 
    </div> 
    </div> 
</div> 

Und hier ist mein CSS:

.parent-container { 
    position: relative; 
    width: 100%; 
} 

.child-container { 
    float: left; 
    position: relative; 
    width: 30%; 
} 

.child-container img { 
    position: absolute; 
    height: 100px; 
    width: 100%; 
} 

.child-container-text { 
    background-color: #000; 
    float: left; 
    height: 100px; 
    position: absolute; 
    width: 40%; 
} 

.overlay { 
    background-color: #FFF; 
    opacity: 0.3; 
    position: absolute; 
    z-index: 999; 
} 

Und hier ist ein CodePen mit ihm: https://codepen.io/leofontes/pen/ORPJWd?editors=1100

Jede Idee, warum sie gestapelt werden immer ? Ich hatte den gleichen Trick absoluter Positionierung für Overlays vor und es funktionierte, warum bricht der Schwimmer es?

Danke

Answer 1

https://jsfiddle.net/37LsfmLa/ die Geige für ein Arbeits Beispiel. (Sorry, ich habe keine Ahnung, wie Codepen funktioniert!)

Ihre Frage ist vage, aber ich glaube, das ist, was Sie suchen. Das Problem mit Ihrem Code ist, dass Sie den Bildern eine absolute Position gegeben haben, während Sie sie in einem floated div haben. Standard float Verhalten wird alle leeren div kollabieren Es wird jedes Element auf seine Inhaltsgröße verkleinern. Ihre Elemente haben ihren width Satz, der dieses Problem beheben sollte, aber es gibt noch einen anderen: sie haben keine Höhe. Das Ergebnis: Sie kollabieren. - Beachten Sie, dass Elemente mit position:absolute tun nicht als Inhalt zählen, die ihre Eltern dehnen.

Das war, wo Ihr Problem war. Sie müssen Ihren divs eine statische Höhe geben, damit so etwas funktioniert, obwohl ich mich wundere, warum Ihre Bilder sogar position:absolute haben? Aber, was auch immer dein Boot schwimmt. (Ich würde nicht position:absolute auf ein beliebiges Bild verwenden, das ein Element füllen sollte, aber das ist nur meine Vorliebe)

.child-container { 
    float: left; 
    position: relative; 
    width: 30%; 
    display: block; 
    height: 100px; 
} 

^die oben ist, was es festgelegt. Eine einfache height Eigenschaft.