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

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!