z-index在ipad中不能很好地工作
我正在用缩略图翻转(http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/)与全屏库建立一个朋友的网站(http://pasionesargentas.com/sm/)。我不太喜欢翻盖的想法,所以我只是简单地选择禁用它,然后添加一个菜单。菜单div css类似于z-index在ipad中不能很好地工作
#top {
position:fixed;
background: transparent;
display: block;
z-index: 99999;
}
它在Chrome,Safari,Explorer和Opera中正常工作。但由于某种原因,她无法在iPad上看到菜单。由于我没有ipad,我下载了Ripple Mission Control,并且它工作的很好,所以我不知道发生了什么。
现在,问题:我必须为平板电脑浏览器(iPad)做不同的CSS吗?或者是画廊搞乱了菜单并覆盖它?
.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索引提供太高的值。试试这个,如果不行的话我会仔细看看。
有同样的问题,想在另一个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;
}
注意提供一个用来解决这个问题的代码示例? – Stunner 2013-02-19 21:07:16
'.topbar { display:block; 背景:透明; height:60px; width:1024px; display:block; margin:0; 填充:0; z-index:6; 位置:相对; } 。中间杆{ display:block; 背景:透明; height:60px; width:1024px; display:block; margin:0; 填充:0; z-index:5; 位置:相对; } .bottom {display:block; 背景:透明; height:758px; width:1024px; display:block; margin:0; 填充:0; z-index:4; 位置:相对; }' – 2013-02-20 11:14:15
对不起,在这里,不得不弄清楚文本格式......所以我唯一修正我的iPad z-index问题的方法是给元素一个相对的位置。这是真的。 – 2013-02-20 11:15:22
谢谢,妮娜!尽管此代码没有直接解决问题(菜单不在.description div中),但它帮助我开始并找到解决方案。非常感谢你!!! – cbarg 2012-08-08 05:43:52
@cbarg什么_was_你的解决方案? – adamdport 2016-09-06 16:44:19