z-index在iPad上不能很好地工作

Question

z-index在iPad上不能很好地工作

7

我正在为一个朋友建立网站(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？还是图库出了问题，覆盖了菜单？

- Claudio

2个回答

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-indexes，您无需过高的值

在检查css错误时，请确保使节点可见并删除其不透明度，并且不要为z-indexes分配过高的值。尝试这个，如果不起作用，我会仔细查看。

- Patt Mehta

谢谢，Nina！虽然这段代码没有直接解决问题（菜单不在.description div中），但它帮助我开始了解并找到了解决方案。非常感谢你！！！ - Claudio

1

@cbarg，你的解决方案是什么？ - adamdport

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Victor Winters · Accepted Answer

我曾遇到同样的问题，想在一个 div 元素上叠加一个透明的 png 图片，但是发现只有通过将 position 属性设置为绝对、固定或相对定位的元素才能使用 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; 
}