Z指數和相對/絕對定位

我有一些Z指數和定位問題。基本上，當你將鼠標懸停在菜單項（家庭，約等），塗料飛濺應該加載菜單下：Z指數和相對/絕對定位

http://www.saradouglas.net/home

樣式表位於：http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css

這工作得很好，當每個飛濺的div被設置爲絕對定位，但我意識到這些將出現在不同屏幕分辨率的不同位置。我認爲這只是將其改爲相對定位，然後相應地調整座標的情況。不幸的是，現在我的飛濺不會出現在菜單下，就像他們應該那樣。

爲了澄清，我希望飛濺出現在菜單下 - 所以菜單應該始終顯示在飛濺的頂部。自從將菜單設置爲相對，這只是一個問題，並且這些飛濺至絕對。

我希望這是一個簡單的解決方案，我只是缺少一些東西。我希望這裏有人能告訴我我出錯的地方並提供解決方案！

到目前爲止已經提交了一些很好的答案，但不幸的是他們還沒有解決我的問題。我曾嘗試將菜單背景添加到ul類而不是div，但這對問題沒有影響。

在此先感謝。

羅斯

來源

2012-04-25 rossautomatica

哪個樣式表是油漆濺入的？ – 2012-04-25 20:04:45

http://www.saradouglas.net/wp-content/themes/sara-douglas-theme/style.css – rossautomatica 2012-04-25 20:05:40

這不是你的問題的答案，而是一般的反饋。我建議一次加載這些'spans'的背景......在用戶懸停一個菜單項後，他們的瀏覽器請求圖像......只需將'background'屬性移動到'span'不行到'a：hover span'...因此所有的圖像將被立即加載。 – skip405 2012-04-25 20:17:28

如果我沒有記錯的z索引的優先順序做的是這樣的

帆布（其中元件被吸入/父母可繪製區域）
BG圖像
z索引：-1
默認（0）
的z-index：1+

所以，當你給孩子的任何元素的-1 z-index的，它不會因爲父母的優先下面的父母背景。

這是您的解決方案。剛剛嘗試過螢火蟲，它的工作原理：

從#menu中刪除bg圖像，並在LI之前的ul.menu下添加一個單獨的div。
給這個div下面的CSS。
現在給所有這些畫筆描邊一個小於-1的z-index。 -2工程。

而且應該是這樣。

CSS：

position:absolute; 
top:0; 
bottom:0; 
left:0; 
right:0; 
z-index:-1; 
background: url(...);

我知道這是沒有那麼多的語義，但是，嘿它的工作原理，對不對？：P

來源

2012-04-26 19:34:04 Ege

嗨 - 感謝您的回答，特別感謝您的深入。不幸的是，我仍然有相同的Z指數問題！你會如此友善來檢查我是否可能遺漏了一些東西？ – rossautomatica 2012-04-26 19:41:56

是的，在ul中添加＃menu-separator，而不是在兄弟旁邊。＃menu-separator應該是ul的子節點。 – Ege 2012-04-26 19:44:32

完美。我現在只需要在ul上做一些工作，使它看起來是這樣，但是這回答了我的問題。謝謝！ – rossautomatica 2012-04-26 19:48:21

您應該設置相對在你的菜單DIV位置，然後在菜單的DIV添加絕對定位的div。那麼不同的屏幕分辨率就不成問題了。

來源

2012-04-25 20:19:07

這回答我的定位問題，但現在飛濺出現在菜單上方... – rossautomatica 2012-04-25 20:21:46

它完全一樣:) – 2012-04-25 20:23:13

感謝您的幫助 - 但是，飛濺出現在菜單頂部，但它們應該在菜單下。你知道我該如何解決這個問題嗎？ – rossautomatica 2012-04-25 20:28:41

您可以通過簡單的設置BG，填充和高度上的UL，而不是<div id="menu">

來源

2012-04-25 20:24:12 simoncereska

嗨Simon，謝謝你的回答。我嘗試過 - 我在'菜單'ul上設置了bg，paddings＆height而不是div，但它給了我目前的完全相同的結果。我現在已經恢復到我原來的代碼，所以我不幸沒有進一步前進。也許我誤解了你的答案？ – rossautomatica 2012-04-26 18:35:34

Z指數和相對/絕對定位

回答

相關問題