logo标签列表

iPad 上的Z-index问题

htmlcssipadz-indexfixed
5

有一个固定位置的层，它有一个底部 z-index，总是弹出到具有更高 z-index 的相对位置的层的顶部。当上面的层滚动到下面的层的顶部时，固定在下面的层就会出现在顶部，然后在页面停止移动时再次消失。这种行为发生在所有不同的“工作”页面上，在ipad设备上以横向方式查看 "@media screen and (max-width: 1100px)"。我只在ipad平板电脑上进行了测试，没有测试其他平板电脑。

注意：当在折叠的浏览器大小为 "@media screen and (max-width: 1100px)" 时，在pc上查看网站时不会出现这种行为。这让我相信这种行为仅限于在横向模式下查看的平板电脑。

任何帮助都将不胜感激。谢谢您的时间。

请参见以下链接以及受影响的代码部分：

http://mikemarchitto.net78.net/portfolio/smithsonian.html

/++++++++++受 HTML 影响的部分+++++++++++/

<div class="innertube">

<div class="gallery-small">
<img class="gallery" src="images/gallery-smithsonian.jpg" alt=""/>
</div>

<div id="button-2">
    <ul>
    <li><a href="edgar-gabriel.html">&larr;</a></li>
    <li><a href="index.html">H</a></li>
        <li><a href="invite.html">&rarr;</a></li>
    </ul>            
</div>
</div>
</div>

<div class="innertube">
<div class="gallery-big">
<img class="gallery" src="images/gallery-smithsonian.jpg" alt=""/>
</div>
</div>

/++++++++++CSS 受影响的部分+++++++++++/

.box {
    width:100%;
    position: relative;
    z-index: 2;
}

#framecontentRight {
    position: fixed;
    z-index: 1;
    top: 17.5em; 
    right: 3em; 
    width: 15.5em; 
    color: #666666;
}

.innertube{
    margin: 3.5em 20em 0 3em; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

.gallery {
    width: 97%;
    height: auto;
    display: block;
    margin-bottom: 3em;
}
1
我已经在我的iPad（iOS 9.3.2）上查看了您的网站，没有发现任何错误。但我想我以前听说过这个问题。据我所知，这是Safari HTML渲染的问题，目前还没有解决方案。（也许苹果会在iOS更新中修复它。） - KIMB-technologies
如果答案对您有帮助并且您没有更多问题，您可以自由地接受它。否则，请随时提问。**:)** - Seika85
1个回答
10
搞定了！谢谢你。 - mikemarchitto1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接