ipad上的Z-index问题 [英] Z-index problems on ipad

问题描述

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

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

非常感谢任何帮助。感谢您抽出宝贵时间。

请参阅下面代码的网站链接和有效部分代码：

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

/ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ c $ c>< div class =innertube>

< div class =gallery-small>
< img class =gallerysrc =images / gallery-smithsonian.jpgalt =/>
< / 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 =gallerysrc =images / gallery-smithsonian.jpgalt =/>
< / div>
< / div>

/ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ /

  .box {
 width：100％; 
头寸：相对; 
 z-index：2; 
} 
 
 #framecontentRight {
 position：fixed; 
 z-index：1; 
 top：17.5em; 
右：3em; 
宽度：15.5em; 
颜色：＃666666; 
} 
 
 .innertube {
保证金：3.5em 20em 0 3em; / *每个DIV内部DIV的边距（提供填充）* / 
} 
 
 .gallery {
宽度：97％; 
身高：汽车; 
 display：block; 
 margin-bottom：3em; 
} 
  

解决方案

添加 -webkit-transform：translate3d（0,0,0）到同一DOM级别的非固定位置元素。在您的情况下 .innertube ，也许 .box 。

如下所示：移动游猎中的固定定位/ z-index问题

There's a fixed positioned layer with a bottom z-index that keeps popping up over the top of a relative positioned layer with an upper z-index. When the above layer scrolls over the top of the lower layer the fixed below layer appears on the top then disappears again when the page stops moving. The behavior happens on all the different "work" pages viewed in landscape "@media screen and (max-width: 1100px)" on an ipad. I have only tested on an ipad tablet not any other tablets.

Note:The behavior does not appear when viewing site on a pc in a collapsed browser sized "@media screen and (max-width: 1100px)". This leads me to believe the behavior is specific to tablets viewed in landscape only.

Any help would be greatly appreciated. Thank you for your time.

See link to site and effected sections of code below:

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

/++++++++++HTML Effected Section+++++++++++/

<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 Effected Section+++++++++++/

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

解决方案

Add -webkit-transform: translate3d(0,0,0) to the not fixed position elements on the same DOM level. In your case .innertube and maybe .box.

As seen here: Fixed positioning/z-index issue in mobile safari

这篇关于ipad上的Z-index问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！