z-index在ipad中不能很好地工作

Question

我正在用縮略圖翻轉（http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/）與全屏庫建立一個朋友的網站（http://pasionesargentas.com/sm/）。我不太喜歡翻蓋的想法，所以我只是簡單地選擇禁用它，然後添加一個菜單。菜單div css類似於

#top { 
position:fixed; 
background: transparent; 
display: block; 
z-index: 99999; 
} 

它在Chrome，Safari，Explorer和Opera中正常工作。但由於某種原因，她無法在iPad上看到菜單。由於我沒有ipad，我下載了Ripple Mission Control，並且它工作的很好，所以我不知道發生了什麼。

現在，問題：我必須爲平板電腦瀏覽器（iPad）做不同的CSS嗎？或者是畫廊搞亂了菜單並覆蓋它？

Answer 1

.description { 
position: fixed; 
top: 5px; 
left: 50px; 
text-shadow: 1px 1px 1px black; 
z-index: 5; 
} 
#nav:hover { 
background: #829FB0; 
opacity: 1.0; 
filter: alpha(opacity=100); 
z-index: 10; 
} 
#nav { 
align: center; 
background: #829FB0; 
padding: 3px 7px; 
display: inline; 
opacity: 1.0; //change this later 
filter: alpha(opacity=65); 
-moz-border-radius: 9px; 
border-radius: 9px; 
z-index: 10; 
} 

這個問題可能是透明覆的div，所以先用這個代碼，其中的div /必須被置於較高的節點不是透明的，然後看，還使用Z-指標取代你的代碼，我已經給出了，你不需要太高的值

在檢查css中的錯誤時，請確保您使節點可見並刪除它們的不透明度並且不要爲z索引提供太高的值。試試這個，如果不行的話我會仔細看看。

Answer 2

有同樣的問題，想在另一個div上使用一個透明png的疊加div。發現z-index只適用於位置屬性已明確設置爲絕對，固定或相對的元素。立即修復了我的ipad z-index問題。

.topbar { 
    display:block; 
    background: transparent; 
    height: 60px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:6; 
    position:relative; 
} 
.middlebar { 
    display:block; 
    background: transparent; 
    height: 60px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:5; 
    position:relative; 
} 
.bottom { 
    display:block; 
    background: transparent; 
    height: 758px; 
    width: 1024px; 
    display: block; 
    margin: 0; 
    padding: 0; 
    z-index:4; 
    position:relative; 
}