wake-up-neo.com

Kind außerhalb eines Überlaufs sichtbar machen: verstecktes Elternteil

In CSS wird overflow:hidden Für übergeordnete Container festgelegt, damit diese mit der Höhe ihrer schwebenden untergeordneten Container erweitert werden können.

In Kombination mit margin: auto Hat es aber noch ein weiteres interessantes Feature ...

Wenn PREVIOUS sibling ein schwebendes Element ist, wird es tatsächlich nebeneinander angezeigt. Wenn das Geschwister float:left Ist, wird der Container mit float:none overflow:hidden Rechts neben dem Geschwister angezeigt, ohne Zeilenumbruch - so als würde er im normalen Fluss schweben. Wenn das vorherige Geschwister float:right Ist, wird der Container links vom Geschwister angezeigt. Wenn Sie die Größe dieses Containers ändern, wird er genau zwischen den schwebenden Elementen zentriert angezeigt. Angenommen, Sie haben zwei frühere Geschwister, eines float:left Und das andere float:right. Der Container wird mittig zwischen den beiden angezeigt.

Also hier ist das Problem ...

Wie pflege ich diese Art von Layout, OHNE Kinder zu maskieren?

Wenn ich im gesamten Web google, habe ich Möglichkeiten, wie ich clear:both Und einen Container erweitern kann ... aber ich kann keine alternative Lösung für die Beibehaltung der linken/rechten Vorgängerzentrierung finden. Wenn Sie den Container overflow:visible Erstellen, ignoriert der Container plötzlich den Layoutfluss der schwebenden Elemente und wird über dem schwebenden Element angezeigt.

Also Frage:

Ich brauche den Container overflow:hidden, Um das Layout zu erhalten ...

wie kann ich es schaffen, dass die Kinder nicht maskiert werden? Ich muss das Kind absolut relativ zum Elternteil außerhalb des Containers positioniert haben.

OR

Wie kann ich overflow:visible, Damit ich ein Kind absolut relativ zum Elternteil außerhalb des Containers positionieren kann?

79
marknadal

Sie können clearfix verwenden, um das Layout auf dieselbe Weise beizubehalten. overflow: hidden tut.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

hinzufügen class="clearfix" Klasse an die Eltern, und entfernen overflow: hidden;

77
Frexuz

Keine der geposteten Antworten hat für mich funktioniert. Einstellung position: absolute für das untergeordnete Element hat jedoch funktioniert.

11
reflexiv

Dies ist eine alte Frage, aber ich bin ihr selbst begegnet.

Ich habe Teillösungen, die situativ für die vorige Frage funktionieren ("Kinder im Überlauf sichtbar: versteckte Eltern")

Wenn das übergeordnete div nicht position: relative sein muss, setzen Sie die untergeordneten Stile einfach auf visible: visible.

Wenn das übergeordnete Div Position: relativ sein muss, war die einzige Möglichkeit, die ich fand, um die Kinder zu zeigen, Position: fest. Das hat in meiner Situation zum Glück funktioniert, aber ich würde mir vorstellen, dass es in anderen nicht funktioniert.

Hier ist ein beschissenes Beispiel, das Sie einfach in eine HTML-Datei posten können.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>
9
Thomas Davis

Für andere, wenn Clearfix dies nicht für Sie löst, fügen Sie dem nicht schwebenden Geschwister Ränder hinzu, die der Breite (den Breiten) des schwebenden Geschwisters (der schwebenden Geschwister) entsprechen.

1
Walf