Wie positioniere ich ein untergeordnetes Element mithilfe des Z-Index in CSS über seinem übergeordneten Element?

Untergeordnetes Element über übergeordnetes Element mit Z-Index anheben

In HTML folgen Elemente einer hierarchischen Struktur, die als Document Object Model (DOM) bezeichnet wird. Wenn mehrere überlappende Elemente vorhanden sind, bestimmt ihre Z-Index-Eigenschaft, welches oben angezeigt wird.

Betrachten Sie den folgenden HTML-Code:

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

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

Angenommen, Sie möchten, dass das „untergeordnete“ Div angezeigt wird über dem „wholePage“-Div. Standardmäßig wirkt sich der Z-Index des „übergeordneten“ Div jedoch auf alle seine untergeordneten Elemente aus.

// Wrong approach
.parent {
  z-index: 100;
  position: relative;
}

// Incorrect output: "child" is hidden behind "wholePage"

Lösung:

Wie in der bereitgestellten Antwort erwähnt, ist dies der Fall Es ist unmöglich, den Z-Index eines untergeordneten Elements nur mit CSS höher zu setzen als den des übergeordneten Elements. Es gibt jedoch zwei Problemumgehungen:

1. Z-Index vom übergeordneten Div entfernen:

Entfernen Sie die Z-Index-Eigenschaft vom „übergeordneten“ Div:

.parent {
  position: relative;
}

Dadurch kann das „untergeordnete“ Div sein eigenes Z erben -index, der höher als „wholePage“ eingestellt werden kann.

2. Machen Sie Geschwister statt Kind:

Anstatt ein Kind des „Eltern“-Divs zu sein, machen Sie das „Kind“-Div zu einem Geschwister von „wholePage“ und legen Sie seinen Z-Index entsprechend fest:

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

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

.sibling {
  position: absolute;
  z-index: 100;
}

.child {
  position: absolute;
  z-index: 150;
}

In diesem Fall sind sowohl „child“ als auch „wholePage“ Geschwister, und die „child“-Div ist höher Z-Index stellt sicher, dass es oben angezeigt wird. Beachten Sie, dass die Verwendung von „position: absolute;“ statt „Position: relativ;“ In diesem Zusammenhang kann das Kind außerhalb des Flusses seines Elternteils positioniert werden.

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