Question

我正在为朋友（http://pasionesargentas.com/sm/）建立一个网站，其中包含带有缩略图翻转的全屏图库（http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/）。我不太喜欢翻盖的想法所以我只是喜欢禁用它并添加一个菜单。菜单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

有同样的问题，想在另一个div的顶部使用带有透明png的重叠div。发现z-index仅适用于其position属性已明确设置为绝对，固定或相对的元素。立即修复了我的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; 
}

Answer 2

.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-indexes我已经给出了，你不需要太高的值

在检查css中的错误时，请确保使节点可见并删除其不透明度，并且永远不要为z-index赋予太高的值。试试这个，如果它不起作用，我会仔细观察。

z-index在ipad中运行得不好

2 个答案: