Exibe a criança do elemento de posição fixa acima da sobreposição absolutamente posicionada - html, css, html5, css3

Eu tenho um layout contendo duas colunas. A coluna da esquerda rola verticalmente e a coluna da direita é fixa. A coluna da direita contém várias seções.

Em algum momento, uma sobreposição será exibida. Quero que cubra todo o conteúdo, exceto a primeira seção na coluna da direita (<aside class="one">...</aside>).

Agora, quando a sobreposição é exibida, ela cobre tudo, incluindo o aside.one elemento, embora tenha um valor de índice z mais alto.

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

Aqui está um jsFiddle ilustrando um exemplo mais completo do meu problema: http://jsfiddle.net/ncSWz/10/

Eu sei que precisarei alterar parte da minha estrutura HTML para que isso funcione, mas não sei exatamente por onde começar.

Desde já, obrigado.

Respostas:

4 para resposta № 1

Existe na verdade um pouco de contexto de empilhamento que está envolvido neste problema.

A ideia é essencialmente, você precisa ter tanto o .overlay e aside.one no mesmo contexto de empilhamento. Você pode conseguir isso movendo o .overlay no #sidebar (uma vez que é position: fixed - isso cria um contexto de empilhamento).

Em seguida, você precisa criar mais contextos de empilhamento dentro da barra lateral. Alterando o posicionamento em aside.one para relative e .overlay para fixed, você cria outros 2 contextos de empilhamento que permitem que você jogue com z-indexdos elementos.

Finalmente, você precisa alterar o z-index no #header de modo que seja abaixo da sobreposição.

• o elemento raiz (HTML),
• posicionado (absolutamente ou relativamente) com um valor de índice z diferente de "auto",
• elementos com um valor de opacidade menor que 1.
• no WebKit para dispositivos móveis e no Chrome 22+, a posição: fixa sempre cria um novo contexto de empilhamento, mesmo quando o índice z é "automático"

Fonte: MDN: O contexto de empilhamento

JsFiddle atualizado: 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 para resposta № 2

Colocar position: absolute nos dois one e twoe defina o topo two; desde que seu pai é fixo, eles estão absolutamente posicionados para isso.

Execução de demonstração

CÓDIGO ADICIONADO

.one {
position: absolute;
}

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

---