![scrolls]( "scrolls")
本文介绍了修复了移动 safari 中的定位/z-index 问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以有问题的网站:http://kaye.at/baby
下面的主要内容在倒计时顶部和导航下方向上滚动，它们都是固定元素.这在桌面上运行良好，但在移动 safari 上，当用户向上移动时，内容会在倒计时后面滚动，但一旦释放触摸，它就会在前面弹出.
只是想知道这是一个错误还是可以修复的东西?
这是CSS:
#header { 位置:固定；宽度:100%；顶部:0px；z-索引:10；}#content { 宽度:100%;位置:相对；顶部:650px；z-索引:7；}#banner { 位置:固定；宽度:100%；位置:固定；背景: url('http://kaye.at/baby/img/stork.jpg') 无重复中心底部 #fff;填充顶部:185px；z-索引:1；}#defaultCountdown { 最大宽度:70%；高度:自动；}
和 HTML(主要结构):
<div id="导航"><ul><li><a class="active" href="index.php">START</a></li><li><a href="ultrasound-images.php">ULTRASOUND PICS</a></li><li><a href="pinkorblue.php">粉红色还是蓝色?</a></li>
<div id="横幅"><div id="defaultCountdown"></div>
<div id="内容">
解决方案
太棒了.只好补充:
-webkit-transform: translate3d(0,0,0);
到#content div.
So the site in question: http://kaye.at/baby
The main content below scrolls up over the top of the countdown and under the navigation which are both fixed elements. This works fine on desktop but on mobile safari, the content scrolls behind the countdown as the user moves up but once touch is released, it pops in front.
Just wondering whether this is a bug or it is something that can be fixed?
Here's the CSS:
#header { position: fixed; width: 100%; top: 0px; z-index: 10; }
#content { width: 100%; position: relative; top: 650px; z-index: 7; }
#banner { position: fixed; width: 100%; position: fixed; background: url('http://kaye.at/baby/img/stork.jpg') no-repeat center bottom #fff; padding-top: 185px; z-index: 1; }
#defaultCountdown { max-width: 70%; height: auto; }
And HTML (main structure):
<div id="header">
<div id="nav">
<ul>
<li><a class="active" href="index.php">START</a></li>
<li><a href="ultrasound-images.php">ULTRASOUND PICS</a></li>
<li><a href="pinkorblue.php">PINK OR BLUE?</a></li>
</ul>
</div>
</div>
<div id="banner">
<div id="defaultCountdown"></div>
</div>
<div id="content">
</div>
解决方案
Ugh amazing. Just had to add:
-webkit-transform: translate3d(0,0,0);
to the #content div.
这篇关于修复了移动 safari 中的定位/z-index 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！