Html iOS不遵守z索引，带有-webkit溢出滚动 问题:

在iOS上，当使用

-webkit溢出滚动时，可滚动区域的
z-index
被忽略。如果两个对象具有
-webkit overflow scrolling
重叠，则会滚动较低的对象，而不是上面显示的对象

如何复制：
创建两个相互重叠的元素（例如
position:absolute
），其中一个具有更高的
z索引
，然后添加

.selector
{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

给他们两个。这两个元素都应有足够的内容可滚动

附加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">



到您的
。然后将页面添加到主屏幕并从那里启动

如果然后尝试滚动上面的元素，则会滚动下面的元素

MCVE：
或者，只需查看。从iOS设备启动版本，将其添加到主屏幕并从主屏幕启动

环境：
在配备iOS 9.1和iOS 9.3.2的iPhone 5和iPhone 6上测试

观察：

该问题仅在从主屏幕（固定应用）或Xamarin Webview（可能与UIWebView和WKWebView有关）内部启动页面/应用时发生
页面加载后更改设备方向（纵向/横向）后，问题得到修复，直到重新加载页面为止（可能重新触发布局修复了它？）
通过JS将较低的元素
overflow-y
更改为
hidden
可以解决问题，但是切换
overflow
会导致重新绘制，从而导致性能问题
移除<代码>高度：100%；宽度：100%

from

html，body

也解决了这个问题，但是必须设置百分比值才能正常工作

---

---

需要一个适当的解决方案/解决方法来解决此问题，而不会造成任何麻烦的副作用。另外，如果您能解释为什么会发生这种情况，我们将不胜感激。

从本质上讲，您所遇到的是一个iOS错误，它带有

-webkit溢出滚动：touch。为了解决此错误，根据，只需将以下CSS样式添加到可滚动的
div
：

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

总而言之，如果您将上述样式添加到CSS中的
可滚动
类的样式中，它应该可以工作。在运行iOS 9的iPhone 5s上测试。请注意，如果您向下滚动到可滚动部分的底部或顶部，它将开始滚动正文

我相信这些额外的样式会诱使iPhone使用GPU，但请记住，它们只是因为Safari的一个bug才有必要使用——这不是你的错，这些额外的样式不应该包括在内。但是把它们放到你的CSS中，它会像做梦一样工作
 一个非常简单的解决方法是在滚动时将类切换到主体，并以可滚动窗口为目标。如果您正在滚动.scrollA，那么将类scrollB切换到body并应用类似于此Javascript/css的内容，或者您可以使用Javascript完成所有操作，这是您的选择

Javascript

$('#targetDivA').on('scroll touch', function(){
   $('body').toggleClass('scrollB);

   //or use this to navigate to it
   //$(this).siblings().toggleClass(\'scrollB\')
})

CSS

body.scrollB .targetDivB {
    pointer-events: none;
    /*this eliminates the device from using any event until removed*/
}

希望这对你有帮助
 假设你像他们一样面对问题。请看这些帖子：






希望这有帮助
 需要时动态删除此属性。它不那么复杂，也不会引起副作用。
如果元素应用了3d变换，我也会遇到类似的z索引错误。我现在没有iOS设备来测试这个，但是你可以尝试删除3d转换。那你到底有什么问题？据我所知，iOS上的z-index有两个问题。一个是z-index元素以错误的顺序显示，另一个是上面描述的滚动错误项目的顺序。我需要向列表中不可见的项目添加0个转换。。但这仍然帮助我到达那里。kudosIn除此之外，在我的例子中，重叠元素需要一个
transform:translateZ（…px）
值高于滚动元素（下面的元素）。否则，当滚动元素离开屏幕（我也有水平滚动）并重新绘制时，它会再次出现在顶部，这是错误的。这个答案让我明白了，谢谢！