Z-index堆棧上下文

我遇到了z-index不像聽起來那麼簡單的問題。Z-index堆棧上下文

在閱讀了我發現的所有內容之後，我仍然找不到解決方案。因此，這裏是我的問題：

<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/

似乎沒有什麼工作至今，我希望你能幫助我。

非常感謝您提前！

來源

2016-07-19 BlackandScholes

爲@M aharkus寫道 - 簡單的Z指數1至3應該工作。也許問題是由父母的定位造成的？然後更新jsfiddle。 – matcygan

.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:1到z-index:3到每個元件，它似乎產生期望的效果。

編輯：

從我的答案刪除的jsfiddle並用代碼片段取代它。

來源

2016-07-19 14:23:26 Maharkus

我想我在創建問題時過分簡化了一點。然而，你的結果正是我想要達到的！你有沒有想辦法讓這件事發生呢？ #second基本上只有一個div。 https://jsfiddle.net/jgbfhv1x/1/非常感謝！ – BlackandScholes

http://jsfiddle.net/jgbfhv1x/4/也許這會幫助 – Maharkus

是的，這是做的伎倆，謝謝！ – BlackandScholes

我認爲這是你需要的。請檢查下面的代碼。

#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>

來源

2016-07-19 14:24:57 San

我想我在創建問題時過於簡單化了一點。然而，你的結果正是我想要達到的！你有沒有看到一種方法讓它發生這個小提琴？ #second基本上只有一個div。 https://jsfiddle.net/jgbfhv1x/1/ 非常感謝！ – BlackandScholes

它不會出現是一個z-index問題，但定位之一。由於您正在使用fixed定位，請記住元素正在相對於視口進行定位。要獲得想要的結果，您需要設置爲top，其中一個爲bottom，最後一個（需要居中）使用absolute centering這個小技巧。

這裏你可以看到的jsfiddle一個例子...

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

更新：

如果期望的結果很簡單，就是「層」的你只需要申請內容z-index是這樣的...

JSFiddle

來源

2016-07-19 14:33:38

是的，我知道你的意思。謝謝您的回答。我只是把所有的div都放在頂部，所以當z-index設置正確時它們會出現堆疊。我想我的問題有點不準確。 – BlackandScholes

這解決了這個問題在你最新的小提琴... https://jsfiddle.net/kennethcss/ucmdo8g1/ 基本上，你添加了一個類，而不是一個id到'toplayer'。 –

是的，工作，謝謝！ – BlackandScholes

Z-index堆棧上下文

回答

相關問題