Heim >Web-Frontend >CSS-Tutorial >Wie kann ich dafür sorgen, dass ein absolut positionierter innerer DIV die Overflow:hidden-Eigenschaft seines übergeordneten Elements berücksichtigt?

Wie kann ich dafür sorgen, dass ein absolut positionierter innerer DIV die Overflow:hidden-Eigenschaft seines übergeordneten Elements berücksichtigt?

DDD
DDDOriginal
2024-12-02 08:33:09755Durchsuche

How Can I Make an Absolutely Positioned Inner DIV Respect its Parent's Overflow:hidden Property?

Position Absolut vs. Überlauf versteckt

Dilemma:

Wir haben zwei verschachtelte DIVs: ein äußeres DIV mit Überlauf: versteckt und ein inneres DIV absolut positioniert. Standardmäßig folgt das innere DIV nicht dem Überlaufverhalten des äußeren DIV. Wie können wir dieses Verhalten beibehalten, ohne die Position des äußeren DIV auf absolut zu ändern, was unser Layout stören würde?

Lösung:

Um sicherzustellen, dass das innere DIV die äußeren DIVs respektiert Überlaufeigenschaft:

  1. Ändern Sie die Position des äußeren DIV in relativ.
  2. Behalten Sie die absolute Positionierung des inneren DIV bei.

Beispiel:

#outer {
  width: 200px;
  height: 200px;
  background-color: green;
  overflow: hidden;
  position: relative;  // Make outer DIV relative
}

#inner {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;  // Keep inner DIV absolute
  left: 250px;
  top: 250px;
}

Zusätzliche Hinweise:

  • Die Verwendung von position: relative für den äußeren DIV hat keinen Einfluss auf dessen Anzeige oder Layout.
  • Der innere DIV muss position: absolut bleiben, um den Grenzen des äußeren DIV zu „entkommen“ und gleichzeitig sein Überlaufverhalten zu respektieren.
  • Für den speziellen Fall, dass ein innerer DIV herauswächst einer Tabellenzelle bleibt die Lösung dieselbe. Indem Sie die äußere Tabellenzelle relativ und den inneren DIV absolut positionieren, erzielen Sie den gewünschten Effekt.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein absolut positionierter innerer DIV die Overflow:hidden-Eigenschaft seines übergeordneten Elements berücksichtigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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