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

Overflow:hidden Unwirksam bei positionierten übergeordneten/untergeordneten Elementen: Ein Problem oder beabsichtigt?

In CSS verbirgt die Eigenschaft overflow:hidden Inhalt, der über die Grenzen seines Containerelements hinausgeht. Es kommt jedoch zu unerwartetem Verhalten, wenn versucht wird, diese Eigenschaft für ein als fest positioniertes Element mit festen untergeordneten Elementen zu verwenden. Die erwartete Überlaufkürzung tritt nicht auf.

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;
}

Erklärung:

Dieses Problem entsteht durch a Einschränkung in CSS: overflow:hidden verbirgt nur effektiv Inhalte innerhalb des Flusses eines Elements. Positionierte Elemente werden wie bei position:fixed aus dem normalen Fluss entfernt und nehmen nicht an der Überlaufbehandlung teil.

Alternative Lösung: CSS-Clip-Eigenschaft

Zu Um das gewünschte Überlauf-Clipping-Verhalten bei positionierten Elementen zu erreichen, sollten Sie die Verwendung der Clip-Eigenschaft in Betracht ziehen. Damit können Sie rechteckige Bereiche innerhalb eines Elements definieren, die sichtbar oder ausgeblendet sind.

Beispiel:

.parent {
  position: fixed;
  clip: rect(0px, 300px, 300px, 0px);
  width: 300px;
  height: 300px;
  background: #555;
}

Hinweise:

• Die Position des übergeordneten Elements darf nicht statisch oder relativ sein.
• Rechteckige Koordinaten werden nicht unterstützt Prozentsätze (außer „auto“).
• Untergeordnete Elemente können in bestimmten Browsern wie IE und Chrome Positionierungsbeschränkungen haben.

Zusätzliche Überlegungen:

• Backface-visibility hinzufügen: versteckt; um die Handhabung der Positionierung untergeordneter Elemente und CSS3-Transformationen zu verbessern.
• Mobile Browser und ältere Versionen unterstützen die Clip-Eigenschaft möglicherweise nur eingeschränkt.

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