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.
InformationsquelleAutor birderic | 2013-09-17
Schreibe einen Kommentar