Anzeige fixed-position-element, das Kind von oben absolut positionierten overlay
Ich habe ein layout mit zwei Spalten. Die linke Spalte scrollt vertikal und in der rechten Spalte ist fixiert. Die Rechte Spalte enthält mehrere Abschnitte.
Irgendwann, ein overlay angezeigt werden. Ich will es auf alle Inhalte außer für den ersten Abschnitt in der rechten Spalte (<aside class="one">...</aside>
).
Gerade jetzt, wenn das overlay wird angezeigt, es umfasst alles, einschließlich der aside.one
element, obwohl es einen höheren z-index Wert.
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 ein jsFiddle, welches ein vollständigeres Beispiel mein problem: http://jsfiddle.net/ncSWz/10/
Ich weiß, ich werde mich ändern müssen, einige meiner HTML-Struktur, um diese Arbeit, aber ich bin nicht sicher, wo genau Sie beginnen.
Vielen Dank im Voraus.
- Wie wichtig ist die IE-Unterstützung für Sie?
- Je mehr Versionen es unterstützt, desto besser, aber es muß wirklich nur zur Unterstützung der neuesten Versionen von allen gängigen Browsern.
- Schade. Wenn Sie hinzufügen
pointer-events:none;
zu Ihrem overlay-Regeln können Sie die Klicks führen direkt durch die div. Leider ist diese nicht in jedem IE (außer angeblich IE11). jsfiddle.net/j08691/ncSWz/11 - Das overlay sollte blockieren alle Inhalte unterhalb und nur damit die Interaktion mit dem element darüber.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ist eigentlich ein bisschen zu stapeln Zusammenhang, der sich mit diesem problem befassen.
Die Idee ist im wesentlichen, müssen Sie sowohl die
.overlay
undaside.one
im gleichen stacking-context. Sie können erreichen, dass durch verschieben der.overlay
in die#sidebar
(da ist esposition: fixed
- dies schafft einen stacking-context).Nächsten, Sie brauchen, um zu erstellen ein paar weitere verschachtelte stapeln von zusammenhängen innerhalb der sidebar. Durch die änderung der Positionierung auf
aside.one
zurelative
und.overlay
zufixed
erstellen Sie ein weiteres 2-stacking-Kontexte, die es ermöglichen, Sie zum spielen mitz-index
ing der Elemente.Schließlich müssen Sie zum ändern der z-index auf
#header
so, dass die unter dem overlay.Quelle: MDN: Die stacking-context
Aktualisiert jsFiddle: http://jsfiddle.net/ncSWz/17/
HTML -
CSS
Setzen
position: absolute
auf beidenone
undtwo
, und legen Sie die Spitze dertwo
; da Ihre Eltern fixiert ist, Sie sind absolut positioniert, um es.Running-Demo
CODE HINZUGEFÜGT