CSS Z-Index分層問題

我對網頁佈局有了一個好主意，並開始設計然後編碼。當我完成菜單時，我想到了YIHA！但是過了一會兒，我注意到即使頁面頂部的.menu項目具有更高的Z-index，它也會在我的.logo類後面。CSS Z-Index分層問題

這裏是一個SASS缺口：

li.menu-item 
     list-style: none 
     position: absolute 
     z-index: 200 

     &:hover > a 
     background-color: #a82929 
     box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5) 
     margin-right: 0px 

     a 
     text-decoration: none 
     color: #ffffff 
     box-sizing: border-box 
     padding: 0px 8px 0px 8px 
     margin-right: 22px 
     transition: all 0.4s ease-in-out 
     position: relative 
     z-index: 300

Link to the CodePen

試圖觀看有關z-index的一些影片，在他們之中一個從CSS-的招數，但我仍然不明白這一點以我想要的方式工作。幫我stackoverflooooow，你我唯一的希望......

來源

2015-08-30 Robban

請在問題中包含一個可重複的例子。這將包括HTML也和編譯的CSS我猜。但無論如何，看看這個：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ – Roope

你是如何意味可重複的例子。我只包含一段代碼，否則我無法鏈接到codepen。沒有真正理解爲什麼我必須在這裏包含代碼來鏈接到codepen，代碼是在那裏？大部分時間讓人們理解他們必須使用整個sass代碼的問題，否則你不會獲得上下文。我是否應該在我的問題中包含整個200多行的sass？加上玉石和js？ – Robban

Codepen會發生什麼事？那麼這個問題及其答案可能對任何人都沒有幫助。 Stack Overflow不願意依賴外部團體，所以一個完整的_但最小化的例子應該始終在問題本身。看看這個：http://stackoverflow.com/help/mcve – Roope

我猜你的問題是這樣的：

.menu-box有z-index的20

.logo-box有z-index的40

而且兩者都有position: relative;因此，這兩者中的所有內容都將單獨在兩者內部「分層」。 .menu-box中的任何內容都不會超過.logo-box，因爲我上面提到了那些z-index。這些內部的所有內容都將僅在這兩個父框中「分層」，內部元素的z-index也只會在父元素內部發生變化。

我也將這裏留在這裏：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

來源

2015-08-30 18:27:23 Roope

所以你說的是，它的編碼方式現在的菜單項不能越過標誌？但是你寫道，他們都有相對位置，但菜單框的位置是絕對的，logo-box有相對的位置，他們有不同的父母，所以我必須重寫一下代碼才能使它工作呢？無賴。感謝您的鏈接，將看看它。 – Robban

@Robban對，他們兩個都沒有'position：relative;'，對不起。但無論如何，我所說的仍然主要適用，所以花點時間瞭解'z-index'是如何工作的，這個鏈接應該對你有很大的幫助。尤其要注意'z-index'對於整個文檔不是通用的，你需要弄清楚你設置的位置是如何影響它的範圍的。 – Roope

是的，你是我的親愛的朋友。只是想知道，如果它有任何區別，如果其中一個相對。但是，我非常感謝你的回答讓我解決了這個問題。我不得不在同一父母中移動'nav'，然後工作。我很感激你花時間爲我的問題寫出了這樣一個很好的答案，讓我覺得有點不僅僅給了我答案，有時候這是需要的，但這次不是。如果是像你說的那樣，你可以在不同的父母中使用相同的z-索引，因爲它只適用於父母？ – Robban

CSS Z-Index分層問題

回答

相關問題