Question

有一个固定的定位图层，其底部的z-index不断弹出具有上z-index的相对定位图层的顶部。当上面的图层滚动到下层的顶部时，固定的下层显示在顶部，然后当页面停止移动时再次消失。行为发生在ipad上的横向“@media屏幕和（max-width：1100px）”中查看的所有不同“工作”页面上。我只在ipad平板电脑上测试过，而不是任何其他平板电脑。

注意：在折叠浏览器大小为“@media screen and（max-width：1100px）”的PC上查看网站时，不会显示此行为。这让我相信这种行为仅适用于仅在横向观看的平板电脑。

非常感谢任何帮助。谢谢你的时间。

请参阅下面的网站链接和受影响的代码部分：

http://mikemarchitto.net78.net/portfolio/smithsonian.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>

/ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
.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问题

1 个答案: