Wyświetlaj dziecko elementu o ustalonej pozycji powyżej bezwzględnie umieszczonej nakładki - html, css, html5, css3

Mam układ zawierający dwie kolumny. Lewa kolumna przewija się pionowo, a prawa kolumna jest ustalona. Prawa kolumna zawiera wiele sekcji.

W pewnym momencie pojawi się nakładka. Chcę, aby obejmowała całą treść z wyjątkiem pierwszej sekcji w prawej kolumnie (<aside class="one">...</aside>).

Teraz, gdy wyświetlana jest nakładka, obejmuje wszystko, łącznie z aside.one element, mimo że ma wyższą wartość indeksu Z.

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;
}

Oto jsFiddle ilustrujący bardziej kompletny przykład mojego problemu: http://jsfiddle.net/ncSWz/10/

Wiem, że będę musiał zmienić część mojej struktury HTML, aby to działało, ale nie jestem pewien, od czego zacząć.

Z góry dziękuję.

Odpowiedzi:

4 dla odpowiedzi № 1

W rzeczywistości jest trochę kontekstu stosu, który jest zaangażowany w ten problem.

Idea jest zasadniczo, musisz mieć zarówno .overlay i aside.one w tym samym kontekście stosu. Możesz to osiągnąć przesuwając .overlay do #sidebar (od kiedy jest position: fixed - tworzy to kontekst układania).

Następnie musisz utworzyć kilka zagnieżdżonych kontekstów układania na pasku bocznym. Zmieniając pozycjonowanie aside.one do relative i .overlay do fixed, Tworzysz kolejne 2 stosy kontekstów, w które możesz grać z-indexing z żywiołów.

Na koniec musisz zmienić indeks Z na #header tak, że jest poniżej nakładki.

• element główny (HTML),
• pozycjonowany (absolutnie lub względnie) z wartością wskaźnika Z inną niż "auto",
• elementy z wartość krycia mniejsza niż 1.
• w mobilnym WebKit i Chrome 22+, position: fixed zawsze tworzy nowy kontekst stosowy, nawet gdy z-index jest "auto"

Źródło: MDN: Kontekst stosu

Zaktualizowano 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 dla odpowiedzi nr 2

Położyć position: absolute zarówno one i twoi ustaw góry two; odkąd ich rodzic jest naprawiony, są całkowicie do niego przywiązani.

Uruchamianie wersji demonstracyjnej

KOD DODANO

.one {
position: absolute;
}

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

---