Html 设置时，iOS上的z索引处理方式不同-webkit溢出滚动：触摸

我在iOS上看到了一些有趣的z-index行为

我的示例代码可在此处查看：

我需要将

#侧栏

显示在

#滑入提示

前面。在Chrome（PC和Android）和Firefox（PC）上查看时就是这样。但是，在iOS Safari和Chrome上，

#滑入提示

出现在

#侧边栏

前面

我意识到，从CSS中删除

-webkit overflow scrolling:touch

，可以让它在所有平台/浏览器中都像预期的那样出现。但是，我需要它，以便在iOS上为

#容器

div提供动量滚动。如果没有它，你的滚动就会在你停止刷卡时停止，这会给你带来糟糕的用户体验

关于如何解决这个问题有什么想法吗？理想情况下，我想要一个CSS唯一的解决方案。在这一点上，HTML的任何重大重组都会给我带来一些巨大的痛苦。该示例是一个已经完整的网站的精简版

HTML:

html，
身体{
身高：100%；
保证金：0；
-webkit溢出滚动：触摸；
}
#顶杆{
排名：0；
宽度：100%；
z指数：200；
背景颜色：绿色；
高度：85px；
位置：绝对位置；
}
#边栏{
浮动：左；
填充：30px；
背景颜色：粉红色；
位置：固定；
宽度：310px；
左：0px；
z指数：150；
顶部：85px；
底部：0px；
填充：0；
填充底部：50px；
}
#集装箱2{
最小高度：100%；
}
#主要{
右边填充：20px；
身高：100%；
保证金：0；
左边距：10%；
线高：40px；
文本对齐：右对齐；
}
#容器{
身高：100%；
保证金：0；
位置：绝对位置；
宽度：100%；
溢出y：滚动；
}
#集装箱2{
填充顶部：75px；
}
#滑入式尖端{
位置：固定；
底部：0；
文本对齐：右对齐；
宽度：100%；
z指数：140；
背景颜色：蓝色；
高度：200px；
}

顶杆
边栏
长内容-有关实际的长内容，请参见js fiddle
滑入式尖端

为您看到的行为提供了解释：

触摸

本地风格的滚动。指定此样式具有创建堆叠上下文（如不透明度、遮罩和变换）的效果

由于无法在创建堆叠上下文后销毁堆叠上下文，因此堆叠上下文之外的元素无法直接与该堆叠上下文内的元素交互，并且在堆叠上下文之间移动元素时，不能不进行物理移动，如果不重新构造物理HTML，您将无法解决堆叠问题

话虽如此，你不应该对你的结构做出重大改变。您所能做的最好的事情就是将

#滑入提示

作为

#边栏

和

#主

的同级移动到

#container2

（只要它们都是同级，您将其放置在何处并不重要）。不管出于什么原因，这似乎会导致模拟器中的滚动出现严重的闪烁-我没有物理设备来测试这一点，所以您需要彻底测试这一点

---

我能提供的唯一基于CSS的解决方法是缩短您的

#滑入提示

，方法是给它一个

左

偏移量，该偏移量等于

#侧边栏的宽度

。请注意，在

#侧边栏

规则中有冲突的

填充

声明，因此

#侧边栏

的宽度实际上是310px，而不是370px。不幸的是，如果

#侧边栏

的部分是透明的，并且您希望

#滑入提示

可以通过这些透明部分看到，那么这也不是一个选项。

尝试增加

z-index

值，可能是200左右。@TricksfortheWeb不需要。谢谢您的解释。这开始有意义了。元素的具体大小是非常不相关的——它们已经根据示例的目的进行了修改。在实际的网站中，#滑入提示根据计时器从屏幕底部临时向上滑动#侧边栏根据用户单击/点击按钮从左侧滑入。我现在在想，最简单的选择可能是在触发侧边栏时完全隐藏“滑入”提示。不过，今天晚些时候，当我能够访问苹果设备时，我会尝试你的建议。将“滑入提示”移动到“容器2”的内部似乎已经做到了这一点。在iphone 6上看不到任何闪烁问题。这是一个相对简单的改变，所以我很乐意接受。