Zeigen Sie das Kind des festen Positionselementes über dem absolut positionierten Overlay an - html, css, html5, css3

Ich habe ein Layout mit zwei Spalten. Die linke Spalte scrollt vertikal und die rechte Spalte ist fixiert. Die rechte Spalte enthält mehrere Abschnitte.

Irgendwann wird ein Overlay angezeigt. Ich möchte, dass alle Inhalte mit Ausnahme des ersten Abschnitts in der rechten Spalte (<aside class="one">...</aside>).

Gerade jetzt, wenn das Overlay angezeigt wird, deckt es alles ab, einschließlich der aside.one Element, obwohl es einen höheren Z-Index-Wert hat.

HTML:

<!-- ... -->

<section id="sidebar">
<aside class="one">...</aside>
<aside class="two">...</aside>
</section>

<!-- ... -->

<div class="overlay"></div>

CSS:

#sidebar {
position: fixed;
}

.one {
z-index: 3;
}

.overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}

Hier ist ein JsFiddle, das ein vollständigeres Beispiel für mein Problem darstellt: http://jsfiddle.net/ncSWz/10/

Ich weiß, dass ich einige meiner HTML-Struktur ändern muss, damit das funktioniert, aber ich bin mir nicht sicher, wo ich anfangen soll.

Danke im Voraus.

Antworten:

4 für die Antwort № 1

Es gibt tatsächlich ein bisschen Stapelkontext, der an diesem Problem beteiligt ist.

Die Idee ist im Wesentlichen, Sie müssen sowohl die .overlay und aside.one im selben Stapelkontext. Sie können dies erreichen, indem Sie die .overlay in die #sidebar (seit es ist position: fixed - Dies erzeugt einen Stapelkontext.

Als Nächstes müssen Sie innerhalb der Seitenleiste ein paar verschachtelte Stapelkontexte erstellen. Durch Ändern der Positionierung auf aside.one zu relative und .overlay zu fixederstellen Sie zwei weitere Stapelkontexte, mit denen Sie spielen können z-indexder Elemente.

Schließlich müssen Sie den Z-Index ändern #header so dass es unter der Überlagerung ist.

• das Wurzelelement (HTML),
• positioniert (absolut oder relativ) mit einem anderen z-index-Wert als "auto",
• Elemente mit einem Opazitätswert kleiner als 1.
• Auf mobilem WebKit und Chrome 22+ erstellt position: fixed immer einen neuen Stapelkontext, auch wenn der Z-Index "auto" ist.

Quelle: MDN: Der Stapelkontext

Aktualisiert jsFiddle: http://jsfiddle.net/ncSWz/17/

HTML

    <section id="sidebar">

<!-- Should be on top of the overlay -->
<aside class="one">...</aside>

<aside class="two">...</aside>

<!-- Should cover all elements except for aside.one -->
<div class="overlay"></div>
</section>

CSS

header {
z-index: 0;
}

...

.one {
position: relative;
width: 100%;
z-index: 3;
}

.overlay {
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}

---

1 für die Antwort № 2

Stellen position: absolute auf beiden one und two, und setze den Anfang von two; da ihre Eltern festgelegt sind, sind sie absolut positioniert.

Laufende Demo

CODE hinzugefügt

.one {
position: absolute;
}

.two {
position: absolute;
top: 25px;
}

---