Ist der Z-Index in HTML absolut oder relativ?

Z-Index: Absolut oder Relativ?

In der Webentwicklung regelt die Z-Index-Eigenschaft die Stapelreihenfolge von HTML-Elementen. Es stellt sich jedoch häufig die Frage: Ist der Z-Index eines Elements absolut oder relativ?

Absoluter oder relativer Z-Index

Die Z-Index-Eigenschaft definiert die Position eines Elements in der dritten Dimension. relativ zu seinen Geschwistern. Es bestimmt nicht die Position des Elements innerhalb des dreidimensionalen Layouts der gesamten Seite. Daher ist der Z-Index relativ zum übergeordneten Element.

Im bereitgestellten Beispiel:

<code class="html"><div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div></code>

#dHello wird unter seinem übergeordneten Div verschachtelt. Obwohl es einen höheren Z-Index (200) hat, wird es hinter #dDomination angezeigt, da letzteres einen Geschwister-Z-Index von 100 hat. Dies liegt daran, dass der Z-Index relativ zum übergeordneten Div ist.

Standards und Browservarianten

Das W3C definiert die Z-Index-Eigenschaft als relativ zum übergeordneten Element. Verschiedene Browser können jedoch unterschiedliche Implementierungen haben:

1. In den meisten Browsern ist der Z-Index relativ zum berechneten Z-Index des übergeordneten Browsers, der normalerweise 0 ist.
2. In Internet Explorer 6 und älter war der Z-Index relativ zum Dokumentstamm.
3. In ** Safari und Chrome waren Elemente mit demselben Z -index werden basierend auf ihrer Position in der Seitenquelle sortiert.

Visualisierungsbeispiel

Betrachten Sie den folgenden Code:

<code class="html"><div id="X" style="z-index:1">
  <div id="Y" style="z-index:3"></div>
</div>
<div id="Z" style="z-index:2"></div></code>

Zunächst könnten Sie davon ausgehen, dass # Y überlappt #Z aufgrund seines höheren Z-Index. Da #Y jedoch ein untergeordnetes Element von #X ist (das einen Z-Index von 1 hat), erscheint #Z sowohl vor #X als auch vor #Y.

Das obige ist der detaillierte Inhalt vonIst der Z-Index in HTML absolut oder relativ?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!