移动safari中的固定定位/ z指数问题 [英] Fixed positioning/z-index issue in mobile safari

问题描述

因此，有问题的网站： http://kaye.at/baby

So the site in question: http://kaye.at/baby

下面的主要内容在倒计时和导航下的顶部滚动，这两者都是固定元素。这在桌面上运行正常，但在移动safari，内容滚动在倒计时后，随着用户向上移动，但一旦触摸释放，它弹出在前面。

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.

只是想知道是否

这是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; }

和HTML（主结构）：

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>

推荐答案

只需添加：

-webkit-transform: translate3d(0,0,0);

到#content div。

to the #content div.

这篇关于移动safari中的固定定位/ z指数问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！