ブートストラップ要素のZインデックス

Question

私は解決策を見つけるのに苦労している状況に直面しています。だから2つのセクションがあります。一番上のセクションには、フレックスを使って底に置いたイメージがあります。アイデアはシンプルですが、私が下にスクロールするにつれて、イメージは所定の位置にスライドします。

私はこれをうまく利用していますが、画像がセクション2内にあるとき、そのセクションの後ろではなく、このセクションの上に座っていることに気付きました。理想的には、セクション2内でこの画像のいずれも見ることができないはずです。このJSFiddleは私の問題を示しています。

私はこれを克服する方法を見つけました。私は本質的に各セクションに相対的な位置を与え、次にz-インデックスを設定しました。

#sectionTwo { 
    position: relative; 
    z-index: -1000; 
} 
#sectionThree { 
    position: relative; 
    z-index:1000; 
    background: #ccc; 
} 

これは、問題を解決するように見えたが、私は好きではない一つのことは、私は要素を検査しようとすると、常にbody要素ではなく、私は選択のセクションに焦点を当てるように見えるということです。

とにかく、その修正が施されていて、別の問題に直面していました。セクションには、上部のボックスが必要でした。そのボックスは、その上のセクションに重複していました。私はz-indexを設定すると、今私に問題を引き起こしていることが気づいた

後、私は私が何を証明するために迅速なスケッチをしました。私はセクション1をオーバーラップするボックスを得ることができません。

ここに私がどこにいるのかを示す最新のJSFiddleがあります。

本当に私はz-indexを正しく処理しているかどうか、そしてボックスオーバーラップセクション1をどのように得ることができるかについてアドバイスしています。

ありがとうございました

Answer 1

はあなたの問題を解決するように見える部分よりも、セクション2に高い7指標を与える必要があります。

#sectionOne { 
    position: relative; 
    z-index: 10; 
} 
#sectionTwo { 
    position: relative; 
    z-index: 20; 
} 
#sectionThree { 
    position: relative; 
    z-index: 30; 
} 

Answer 2

これはあなたの後ですか？あなたはセクション1の上にあることをセクション2の要素を欠けている場合は、正のZIndex値に行く1.

#sectionOne { 
background: #ccc; 
z-index: 2; 
} 
#sectionTwo { 
position: relative; 
z-index: 3; 
} 
#sectionThree { 
position: relative; 
z-index:1; 
background: #ccc; 
}