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

93

In CSS overflow:hiddenwird das für übergeordnete Container festgelegt, damit es mit der Höhe der schwebenden untergeordneten Container erweitert werden kann.

Aber es hat auch eine andere interessante Eigenschaft, wenn es mit margin: auto...

Wenn VORHERIGES Geschwister ein schwebendes Element ist, wird es tatsächlich nebeneinander angezeigt. Das heißt, wenn das Geschwister ist, erscheint float:leftder Container mit float:none overflow:hiddenrechts neben dem Geschwister, keine neue Zeile - so als ob er im normalen Fluss schweben würde. Wenn es sich um das vorherige Geschwister handelt, float:rightwird der Container links vom Geschwister angezeigt. Wenn Sie die Größe dieses Containers ändern, wird er genau zwischen den schwebenden Elementen zentriert angezeigt. Sagen Sie, wenn Sie zwei vorherigen Geschwister haben, eine float:leftder anderen float:right, wird der Behälter zwischen die beiden zentriert erscheinen.

Also hier ist das Problem ...

Wie kann ich diese Art von Layout beibehalten, ohne Kinder zu maskieren?

Das Googeln im gesamten Web gibt mir Möglichkeiten, wie clear:bothein Container erweitert werden kann. Ich kann jedoch keine alternative Lösung finden, um die linke / rechte Zentrierung des vorherigen Kindes beizubehalten. Wenn Sie den Container overflow:visibleerstellen, ignoriert der Container plötzlich den Layoutfluss der schwebenden Elemente und erscheint über dem schwebenden Element geschichtet.

Also Frage :

Ich muss den Container haben 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 positionieren.

ODER

Wie overflow:visiblekann ich ein Kind absolut relativ zum Elternteil außerhalb des Containers positionieren ... NOCH den schwimmerartigen Layoutfluss der Geschwister bewahren?

css overflow css-float center hidden Marknadal
quelle

Antworten:

86

Sie können das verwenden clearfix, um "Layout beizubehalten" auf die gleiche Weise overflow: hiddendurchzuführen.

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

Fügen Sie class="clearfix"dem übergeordneten Element eine Klasse hinzu, und entfernen Sie sieoverflow: hidden;

Frexuz
quelle
Hmm! Clever, ich experimentiere gerade damit. Was ich derzeit erhalte, ist, dass sich der generierte Inhalt korrekt verhält und im Ablauf des Layouts erhalten bleibt. Der übergeordnete Inhalt ignoriert ihn jedoch weiterhin und überlagert die schwebenden Elemente. Dies ist jedoch eine sehr gute Idee und ich werde mehr damit spielen, um zu sehen, ob ich es dazu bringen kann, sich richtig zu verhalten, und um zur Abstimmung zurückzukehren. Danke :).
Marknadal
@ user1671639 Ihr Beispiel gilt nicht wirklich für einen Clearfix. Sie benötigen etwas anderes, daher schlage ich vor, dass Sie eine Frage zu Ihrem Problem stellen.
Frexuz
Dies funktioniert nicht auf die gleiche Weise wie overflow:hiddenüberhaupt. Durch Anwenden eines Clearfixes auf das übergeordnete div können nicht alle untergeordneten Komponenten in derselben Höhe wie das übergeordnete Element "enthalten" sein.
Khom Nazid
11

Keine der geposteten Antworten hat bei mir funktioniert. Die Einstellung position: absolutefür das untergeordnete Element hat jedoch funktioniert.

reflexiv
quelle
14
Aber würde das übergeordnete DIV es nicht maskieren, wenn es über die Grenzen des übergeordneten DIV hinausgeht (das übergelaufen ist: versteckt)?
Marknadal
8
Afaik tut es nicht, solange der Elternteil keine Position hat: relativ. Dann wird das Kind relativ zu seinem ersten positionierten (nicht statischen) Vorfahrenelement positioniert, wodurch es aus dem regulären Dom-Fluss (des Elternteils) entfernt wird.
Pim Schaaf
Wenn das übergeordnete Element position: relative hat und es nicht benötigt, können Sie es position: unset festlegen.
Yeahlad
Richtig, wenn es position: fixedrelativ zu etwas außerhalb des übergeordneten Elements positioniert ist visibility: hidden, ist es sichtbar. Sie müssen es jedoch häufig relativ zum übergeordneten Element positionieren (möchten), um gegenüber Codeänderungen robuster zu sein. Dann sind diese Lösungen keine Alternative.
ArneHugo
10

Dies ist eine alte Frage, die ich aber selbst gestellt habe.

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

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

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

Hier ist ein beschissenes Beispiel, das Sie einfach in eine HTML-Datei posten, um es anzuzeigen. 

<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>
Thomas Davis
quelle
Hier ist ein beschissenes Beispiel, das Sie einfach in eine HTML-Datei posten, um es anzuzeigen. <code> <div style = "Hintergrund: # ff00ff; Überlauf: versteckt; Breite: 500px; Höhe: 500px; Position: relativ;"> <div style = "Hintergrund: # ff0000; Position: fest; oben: 10px; links : 10px; "> asd <div style =" Hintergrund: # 00ffff; Breite: 200px; Überlauf: sichtbar; Position: absolut; Sichtbarkeit: sichtbar; klar: beide; Höhe: 1000px; Oberseite: 100px; links: 10px; "> a </ div> </ div> </ div> </ code>
Thomas Davis
3
Vielen Dank, dass Sie versucht haben zu antworten. Dies funktioniert jedoch nicht, da das Element durch die feste Position automatisch relativ zum Ansichtsfenster positioniert wird, was bedeutet, dass es sich nicht mit dem übergeordneten Element bewegt. Wenn Sie eine Bildlaufseite haben, bleibt diese beim Scrollen bei 10 Pixel und 10 Pixel.
Marknadal
"Wenn das übergeordnete Div Position: relativ sein muss, war die einzige Möglichkeit, die ich den Kindern zeigen konnte, Position: fest." Dank dafür. Ich hatte eine Popover-Hilfeblase, die überlaufen musste, obwohl das übergeordnete Element übergelaufen war: Scrollen. Am Ende hatte ich ein absolutes Div mit einem relativen inneren und dann einem festen Inhaltsbereich.
JackMorrissey
Danke, das hat bei mir funktioniert. Ich hatte einen Elternteil mit relativer Position, und das wurde benötigt, weil seine Position mit eingestellt wurde left. Die Verwendung von margin-leftstattdessen würde den gleichen Effekt erzielen, sodass ich die relative Position nicht mehr verwenden musste.
Felipe Castro
1

Wenn Clearfix dies für Sie nicht löst, fügen Sie dem nicht schwebenden Geschwister Ränder hinzu, die der Breite (n) der schwebenden Geschwister entsprechen.

Walf
quelle