7

我正在为一个朋友（http://pasionesargentas.com/sm/）建立一个带有缩略图翻转全屏画廊的网站（http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-缩略图翻转/）。我不太喜欢翻转的想法，所以我只是更喜欢禁用它并添加一个菜单。菜单 div css 类似于

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

它在 Chrome、Safari、Explorer 和 Opera 中运行良好。但由于某种原因，她在 iPad 上看不到菜单。因为我没有 ipad，所以我下载了 Ripple Mission Control，它也可以正常工作，所以我不知道发生了什么。

现在，问题是：我必须为平板电脑浏览器（iPad）做不同的 css 吗？还是画廊弄乱了菜单并掩盖了它？

4

2 回答 2

4

有同样的问题，想在另一个 div 上使用一个带有透明 png 的覆盖 div。发现z-index这只适用于位置属性已明确设置为绝对、固定或相对的元素。立即修复了我的 ipadz-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; 
}
于 2013-02-19T20:47:59.387 回答
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;
}

问题可能是透明的覆盖 divs，所以首先用这个代码替换你的代码，其中必须放置更高的 divs/nodes 不透明然后看看，也使用我给出的 z-indexes，你不需要太很高的价值观

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

于 2012-08-07T12:47:50.537 回答