Wie überlappen sich Z-Index-Steuerelemente in CSS?

Z-Index-Stapelreihenfolge verstehen

Die Stapelreihenfolge bestimmt die Reihenfolge, in der sich Elemente auf einer Webseite überlappen. Die Z-Index-Eigenschaft wird verwendet, um die Stapelreihenfolge zu steuern und Elementen, die vor anderen erscheinen sollen, höhere Werte zu geben.

Position und Z-Index verstehen

Der Z-Index gilt für positionierte Elemente (absolut, relativ, fest, klebrig) und Flex- oder Rasterelemente mit der Position: statisch.

Stapelung Kontexte

Wenn ein Element positioniert wird, wird ein Stapelkontext erstellt, der den Z-Index-Bereich auf das Element und seine Nachkommen beschränkt.

Stapelreihenfolge

In der Stapelreihenfolge ohne Z-Index folgen die Elemente der Reihenfolge:

1. Stamm Hintergrund und Ränder des Elements
2. Nicht positionierter (statischer) Block, dann schwebende Elemente (in der Reihenfolge ihres Erscheinens)
3. Inline-Elemente
4. Positionierte Elemente (in der Reihenfolge ihres Erscheinens)

Mit Z-Index:

1. Hintergrund des Root-Elements und Grenzen
2. Positionierte Elemente mit Z-Index < 0
3. Nicht positionierter Block, dann schwebende Elemente (in der Reihenfolge ihres Erscheinens)
4. Inline-Elemente
5. Positionierte Elemente (in der Reihenfolge ihres Erscheinens)
6. Positioniert Elemente mit Z-Index > 0

Beispiele

Gemischte Geschwister-Divs:

• Div1: Position: relativ, z- Index: 10;
• Div2: Position: static;
• Div3: Position: fest, Z-Index: 20;

Div3 überlappt Div1 und Div2, während Div1 Div2 überlappt.

Verschachtelte und gemischte Divs:

• Div1: Position: absolut, Z-Index: 10;
• Div2: Position: statisch;
• Div3: Position: fest, Z-Index: 20;
• Div4: Position: relativ, Z-Index: 15;

Div3 überlappt alle Divs. Div4 überlappt Div1 und Div2, während Div1 Div2 überlappt.

Das obige ist der detaillierte Inhalt vonWie überlappen sich Z-Index-Steuerelemente in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!