Z-インデックススタッキングコンテキスト

Question

z-indexが聞こえるほど単純ではないという問題が発生しました。

基本的に私がそれについて見つけたすべてを読んだ後、私はまだ解決策を見つけることができませんでした。だからここに私の問題です：

JSFiddle

<div id="first"> 
<div id="middlelayer"> 
    2 
</div> 
</div> 
<div id="second"> 
    <div id="toplayer"> 
    1 
    </div> 
    <div id="lowestlayer"> 
    3 
    </div> 
</div> 

私は別の親（#middlelayer）の本部は二つの他のdiv（#toplayerと#lowestlayer）の間に座るしたいです。私は、zインデックスの基本的あらゆる組み合わせでexperimentendとも不透明での回避策を試してみました：0.99、ここで説明：

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

何がこれまで動作するように見えない、私はあなたが私を助けることができると思います。

ありがとうございます！

Answer 1

.toplayer { 
 
    width: 120px; 
 
    background-color: green; 
 
    position: fixed; 
 
    z-index: 3; 
 
} 
 

 
#middlelayer { 
 
    width: 140px; 
 
    background-color: blue; 
 
    position: fixed; 
 
    z-index: 2; 
 
} 
 

 
#lowestlayer { 
 
    width: 160px; 
 
    background-color: yellow; 
 
    position: fixed; 
 
}

<div id="first" >  
 
     <div id="middlelayer"> 
 
      middle 
 
     </div> 
 
</div> 
 
<div id="second"> 
 
    <div id="second2"> 
 
       <div id="lowestlayer"> 
 
        low 
 
       </div>  
 
       <div class="toplayer"> 
 
        top     
 
       </div> 
 
    </div> 
 
</div>

ただ要素のそれぞれにz-index:3にz-index:1を添加し、所望の効果を生じるように思われます。

EDIT：

が私の答えからJSFiddleを削除し、コードスニペットに置き換え。

Answer 2

私はこれがあなたが必要と考えるものです。以下のコードを確認してください。

#lowestlayer { 
 
    opacity: .99; 
 
} 
 

 
#lowestlayer, #middlelayer, #toplayer { 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
#lowestlayer { 
 
    z-index: 1; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#middlelayer { 
 
    top: 45px; 
 
    left: 45px; 
 
    background: green; 
 
    z-index: 2; 
 
    width: 150px; 
 
    height: 150px; 
 
} 
 

 
#toplayer { 
 
    top: 70px; 
 
    left: 70px; 
 
    background: blue; 
 
    z-index: 3; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="first"> 
 
<div id="middlelayer"> 
 
    2 
 
</div> 
 
</div> 
 
<div id="second"> 
 
    <div id="toplayer"> 
 
    1 
 
    </div> 
 
    <div id="lowestlayer"> 
 
    3 
 
    </div> 
 
</div>

Answer 3

z-index問題ではなくポジショニングの一つであることが表示されません。 fixedポジショニングを使用しているので、要素がビューポートを基準にして配置されていることに注意してください。結果を得るにはtop、1つをbottomに設定し、最後には（中央に配置する必要があります）absolute centeringという小さなトリックを使用します。ここで

は...あなたがJSFiddle上で見ることができる一例である

https://jsfiddle.net/kennethcss/smejLps4/

更新：所望の結果はあなただけ適用する必要があり、単純に「レイヤー」の要素である場合

そのようなz-index ... @Mなど

JSFiddle