Html 修复了移动 Safari 中的定位/z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18271460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed positioning/z-index issue in mobile safari
提问by user1393984
So the site in question: http://kaye.at/baby
所以有问题的网站：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.
下面的主要内容在倒计时顶部和导航下方向上滚动，它们都是固定元素。这在桌面上运行良好，但在移动 safari 上，当用户向上移动时，内容会在倒计时后面滚动，但一旦释放触摸，它就会在前面弹出。
Just wondering whether this is a bug or it is something that can be fixed?
只是想知道这是一个错误还是可以修复的东西？
Here's the CSS:
这是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):
和 HTML（主要结构）：
<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>
回答by user1393984
Ugh amazing. Just had to add:
哦了不起。只好补充：
-webkit-transform: translate3d(0,0,0);
to the #content div.
到#content div。
回答by Serge Seletskyy
For Mobile Safari it's better to avoid using position:fixed
对于 Mobile Safari，最好避免使用 position:fixed
Make sure you use such CSS for your scrolling container and all children inside of it
确保为滚动容器及其内的所有子项使用此类 CSS
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}
回答by cowcowmoomoo
If you apply #banner {z-index:-1}and body {background:transparent}your problem should be solved.
如果你申请#banner {z-index:-1}，body {background:transparent}你的问题应该得到解决。
