Wie kann die Sichtbarkeit schwebender untergeordneter Elemente über einen Überlauf hinaus erhalten bleiben: verstecktes übergeordnetes Element?

Bewahrung der Sichtbarkeit schwebender untergeordneter Elemente über den Overflow:Hidden Parent hinaus

In CSS kann die Eigenschaft overflow:hidden auf übergeordnete Container angewendet werden, um dies sicherzustellen dass sie sich vertikal ausdehnen, um schwebende Kinder aufzunehmen. Allerdings zeigt diese Eigenschaft auch ein interessantes Verhalten, wenn sie in Verbindung mit margin:auto verwendet wird.

Wenn ein übergeordneter Container mit overflow:hidden und margin:auto einem schwebenden Element gleichgeordnet ist, wird es neben diesem Element angezeigt . Dies bedeutet, dass, wenn der Geschwistercontainer nach links verschoben wird, der übergeordnete Container nach rechts verschoben und zwischen den schwebenden Elementen zentriert wird.

Während dieses Verhalten in bestimmten Szenarien nützlich sein kann, kann es vorkommen, dass Sie Sie möchten dieses Layout beibehalten, ohne die untergeordneten Elemente zu maskieren. Dies kann eine Herausforderung sein, da overflow:visible den Layout-Erhaltungseffekt deaktiviert, was dazu führt, dass die untergeordneten Elemente vom übergeordneten Container abgedeckt werden.

Lösung mit der Clearfix-Technik:

Um dieses Problem zu beheben, können Sie die Clearfix-Technik verwenden, die eine „Layouterhaltung“ ohne Rückgriff auf overflow:hidden ermöglicht. So geht's:

1. Erstellen Sie eine Clearfix-Klasse mit den folgenden CSS-Stilen:

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

2. Fügen Sie die Clearfix-Klasse zum übergeordneten Container hinzu und entfernen Sie die overflow:hidden-Eigenschaft.

Durch die Anwendung der Clearfix-Klasse können Sie das gewünschte Layout beibehalten, einschließlich der relativen Positionierung der schwebenden Elemente, und gleichzeitig sicherstellen, dass die untergeordneten Elemente nicht maskiert werden. Diese Technik dient als geeignete Alternative zu overflow:hidden, wenn Sie die visuelle Hierarchie und Zugänglichkeit von Elementen außerhalb des übergeordneten Containers beibehalten müssen.

Das obige ist der detaillierte Inhalt vonWie kann die Sichtbarkeit schwebender untergeordneter Elemente über einen Überlauf hinaus erhalten bleiben: verstecktes übergeordnetes Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!