Wie kann ich ein untergeordnetes Element mithilfe des Z-Index über seinem übergeordneten Element positionieren?

So positionieren Sie ein untergeordnetes Element mit dem Z-Index über dem übergeordneten Element

In der Webentwicklung ist es häufig erforderlich, die Stapelreihenfolge von Elementen zu steuern. Standardmäßig werden Elemente entsprechend der Reihenfolge positioniert, in der sie im HTML-Code erscheinen. Es ist jedoch möglich, dieses Verhalten mithilfe der Z-Index-Eigenschaft zu überschreiben.

Beachten Sie den folgenden HTML-Code:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

In dieser Struktur ist das untergeordnete Element im übergeordneten Element verschachtelt . Die Stapelreihenfolge ist so, dass das übergeordnete Element über dem untergeordneten Element positioniert ist.

Angenommen, wir möchten nun die Stapelreihenfolge ändern, sodass das untergeordnete Element über dem WholePage-Element angezeigt wird. Wir können versuchen, dies mithilfe von Z-Index zu erreichen, wie im folgenden CSS gezeigt:

.parent {
    z-index: 10;
}

.child {
    z-index: 20;
}

Diese Änderung wird jedoch nicht den gewünschten Effekt haben. Das untergeordnete Element wird weiterhin unter dem übergeordneten Element positioniert, auch wenn es einen höheren Z-Index hat.

Dies liegt daran, dass, wie im Fehler angegeben, „der Z-Index eines untergeordneten Elements auf denselben Stapelindex eingestellt ist.“ als sein übergeordnetes Element. Dies bedeutet, dass es unmöglich ist, ein untergeordnetes Element nur mit dem Z-Index über seinem übergeordneten Element zu positionieren.

Um die gewünschte Stapelreihenfolge zu erreichen, müssen wir die Verschachtelungsbeziehung zwischen dem untergeordneten und dem übergeordneten Element entfernen. Dies kann erreicht werden, indem das untergeordnete Element wie folgt zu einem Geschwisterelement des übergeordneten Elements gemacht wird:

<div class="parent"></div>
<div class="child">
    Hello world
</div>
<div class="wholePage"></div>

Mit dieser Änderung wird das untergeordnete Element wie gewünscht über dem WholePage-Element positioniert.

Das obige ist der detaillierte Inhalt vonWie kann ich ein untergeordnetes Element mithilfe des Z-Index über seinem übergeordneten Element positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!