Warum funktioniert „overflow:hidden' nicht bei fest positionierten übergeordneten und untergeordneten Elementen?

Overflow:hidden funktioniert nicht bei festen übergeordneten/untergeordneten Elementen

Frage:

Warum funktioniert der Überlauf nicht: versteckte Eigenschaftsfunktion für feste übergeordnete/untergeordnete Elemente Elemente?

Beispiel:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
}

.children {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 150px;
  height: 150px;
  background: #333;
}

<div class="parent">
  <div class="children"></div>
</div>

Antwort:

CSS-Clip: rect() kann ausschneiden ein fest positioniertes Element zu seinem übergeordneten Element. Es gibt jedoch einige Einschränkungen:

• Die Position des übergeordneten Elements darf nicht statisch oder relativ sein.
• Prozentangaben werden für die Rechteckkoordinaten nicht unterstützt (obwohl „Auto“ 100 % entspricht).
• Untergeordnete Elemente haben möglicherweise eingeschränkte Positionierungs- und CSS3-Transformationsoptionen.

Siehe die aktualisierte JSFiddle Demo für ein Beispiel für die Verwendung von Clip: rect().

Zusätzliche Hinweise:

• Verwenden Sie backface-visibility:hiden für untergeordnete Elemente für eine verbesserte Unterstützung in Chrome .
• Die Unterstützung für ältere und mobile Browser ist möglicherweise eingeschränkt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow:hidden' nicht bei fest positionierten übergeordneten und untergeordneten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!