固定位置要素の子を絶対配置されたオーバーレイの上に表示する - html、css、html5、css3

2つの列を含むレイアウトがあります。左の列は垂直方向にスクロールし、右の列は固定されています。右側の列には複数のセクションが含まれています。

ある時点で、オーバーレイが表示されます。右の列の最初のセクションを除くすべてのコンテンツをカバーしたい（<aside class="one">...</aside>）。

現在、オーバーレイが表示されると、 aside.one z-index値が高くても要素。

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

これが私の問題のより完全な例を示すjsFiddleです： http://jsfiddle.net/ncSWz/10/

これを機能させるには、HTML構造の一部を変更する必要があることはわかっていますが、どこから始めればよいのか正確にはわかりません。

前もって感謝します。

回答：

回答№1は4

実際には、この問題に関係するスタッキングコンテキストが少しあります。

アイデアは本質的に、あなたは両方を持っている必要があります .overlay そして aside.one 同じスタッキングコンテキストで。あなたはそれを動かすことによってそれを達成することができます .overlay に #sidebar （それは position: fixed -これにより、スタッキングコンテキストが作成されます）。

次に、サイドバー内にネストされたスタッキングコンテキストをさらにいくつか作成する必要があります。上の位置を変更することによって aside.one に relative そして .overlay に fixed、あなたはあなたが遊ぶことを可能にする別の2つのスタッキングコンテキストを作成します z-index要素のing。

最後に、z-indexを変更する必要があります #header オーバーレイの下になります。

• ルート要素（HTML）、
• 「auto」以外のz-index値で（絶対的または相対的に）配置され、
• の要素 不透明度の値が1未満。
• モバイルWebKitおよびChrome22以降では、position：fixedは、z-indexが「自動」の場合でも、常に新しいスタッキングコンテキストを作成します。

出典：MDN： スタッキングコンテキスト

更新された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;
}

---

回答№2の場合は1

置く position: absolute 両方に one そして two、の上部を設定します two;彼らの親は固定されているので、彼らは絶対にそれに位置しています。

デモの実行

コードが追加されました

.one {
position: absolute;
}

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

---