ipad 上的 Z-index 问题

Question

有一个带有底部 z-index 的固定定位层，它不断弹出在具有较高 z-index 的相对定位层的顶部。当上层滚动到下层的顶部时，固定的下层出现在顶部，然后当页面停止移动时再次消失。该行为发生在 ipad 上横向“@media screen and (max-width: 1100px)”中查看的所有不同 "work" 页面上。我只在 ipad 平板电脑上测试过，没有在任何其他平板电脑上测试过。

注意：在 PC 上以折叠浏览器大小“@media screen and (max-width: 1100px)”查看站点时不会出现此行为。这让我相信这种行为仅适用于横向查看的平板电脑。

如有任何帮助，我们将不胜感激。谢谢你的时间。

请参阅 link 站点和以下代码的受影响部分：

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

Answer 1

将-webkit-transform: translate3d(0,0,0)添加到同一DOM级别的非固定位置元素。在你的情况下 .innertube 也许 .box.

如此处所示：Fixed positioning/z-index issue in mobile safari

ipad 上的 Z-index 问题

Z-index problems on ipad

html

css

fixed

z-index

ipad