Heim > Web-Frontend > CSS-Tutorial > Warum funktioniert Overflow:hidden nicht bei absolut positionierten verschachtelten DIVs, es sei denn, das übergeordnete Element ist relativ positioniert?

Warum funktioniert Overflow:hidden nicht bei absolut positionierten verschachtelten DIVs, es sei denn, das übergeordnete Element ist relativ positioniert?

Patricia Arquette
Freigeben: 2024-12-02 15:23:12
Original
536 Leute haben es durchsucht

Why Doesn't Overflow:hidden Work on Absolutely Positioned Nested DIVs Unless the Parent is Positioned Relatively?

Absolute Positionierung und verstecktes Überlauf-Rätsel

Beim Umgang mit verschachtelten DIVs kann es schwierig sein, versteckte Überlaufeigenschaften auf dem äußeren DIV zu erzwingen, wenn es ist nicht absolut positioniert. Dies kann dazu führen, dass das innere DIV absolut positioniert ist und das Verhalten des versteckten Überlaufs außer Acht lässt.

Beachten Sie die folgende HTML-Struktur:

<div>
Nach dem Login kopieren

Wobei #first eine Eigenschaft des versteckten Überlaufs hat und # Sekunde ist absolut positioniert. In diesem Szenario wird #second die versteckte Überlaufbeschränkung nicht berücksichtigen.

Um dieses Problem zu beheben, ohne #first auf die absolute Position festzulegen, ziehen Sie die folgende Lösung in Betracht:

  1. Position #erster als relativ:

    #first {
      position: relative;
    }
    Nach dem Login kopieren
  2. #zweiter positioniert halten absolut:

    #second {
      position: absolute;
    }
    Nach dem Login kopieren

Mit dieser Konfiguration hält sich #second nun an die Overflow-Hidden-Eigenschaft von #first. Dadurch können Sie das gewünschte Layout beibehalten und gleichzeitig sicherstellen, dass der innere DIV die Überlaufbeschränkungen berücksichtigt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Overflow:hidden nicht bei absolut positionierten verschachtelten DIVs, es sei denn, das übergeordnete Element ist relativ positioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage