Welche CSS-Eigenschaften lösen einen Stacking-Kontext aus?

Welche CSS-Eigenschaften erstellen einen Stapelkontext?

Stacking-Kontexte sind wichtig, um die Reihenfolge zu steuern, in der sich Elemente überlappen und auf einer Webseite angezeigt werden . Verschiedene CSS-Eigenschaften können die Erstellung eines neuen Stapelkontexts auslösen und so das Element und seine Nachkommen effektiv vom Layoutfluss isolieren.

Eigenschaften, die einen Stapelkontext erstellen:

Die folgenden Eigenschaften bilden zusätzlich zum weithin bekannten Z-Index einen Stapelkontext:

1. transform: Jeder Transformationswert außer keine
2. Deckkraft: Jeder Wert kleiner als 1
3. Perspektive: Jeder andere Wert als keine

Andere Eigenschaften, die Stapelkontexte beeinflussen:

Zusätzlich zu diesen Kerneigenschaften lösen auch die folgenden Szenarien die Erstellung eines Stackings aus context:

• z-index: Z-index auf einen nicht automatischen Wert für ein positioniertes Element setzen (außer bei festen Elementen in einigen Browsern)
• flow-from: Fluss festlegen -von bis zu einem Nicht-Keine-Wert für ein Element mit anderem als normalem Inhalt
• Seitenrandfelder in ausgelagerten Medien
• Filter: Filter auf a setzen Nicht-Keine-Wert
• Isolation und Mix-Blend-Modus: Festlegen beider Eigenschaften beim Compositing und Blending
• will-change: Festlegen von will-change auf eine Eigenschaft, die einen Stapelkontext erstellen würde
• Clip-Pfad und Maske: Festlegen einer der beiden Eigenschaften auf einen Wert ungleich „none“ in Maskierung

Hinweis: Ein Stapelkontext unterscheidet sich von einem Blockformatierungskontext, der das Layout von Blockelementen innerhalb eines Elements regelt.

Das obige ist der detaillierte Inhalt vonWelche CSS-Eigenschaften lösen einen Stacking-Kontext aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!