Html iOS Safari 和 Chrome 上的 Z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18255511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Z-index issue on iOS Safari & Chrome
提问by myadlan
I'm having an issue with a responsive dropdown menu, based on wordpress Underscores theme.
我遇到了基于 wordpress Underscores 主题的响应式下拉菜单的问题。
It looks okay on desktop but not on iOS Safari including iPad and iPhone.
它在桌面上看起来不错，但在包括 iPad 和 iPhone 在内的 iOS Safari 上看起来不错。
I've tried to add z-index to other divs as well but it doesn't work. Please help me. Thanks.
我也尝试将 z-index 添加到其他 div，但它不起作用。请帮我。谢谢。
回答by Fabien
There is actually a fourth method, with translate3d:
实际上还有第四种方法，使用 translate3d：
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
iOS browsers fully support CSS3, so you can use this safely.
iOS 浏览器完全支持 CSS3，因此您可以安全地使用它。
回答by Ajay
There are 3 ways you can handle this:
1. You can set the z-index value to a large number like 80 or 90.
2. You can add the menu element after the other divs (so by default it will place on other items)
3. You can set the z-index of the text in the divs to be less than that of the menu div.
有 3 种方法可以处理此问题：
1. 您可以将 z-index 值设置为一个大数字，例如 80 或 90。
2. 您可以在其他 div 之后添加菜单元素（因此默认情况下它将放置在其他项目上)
3. 可以设置div中文字的z-index小于菜单div的z-index。
回答by Adam
You cannot just apply a z-index to your dropdown menu - what you need to do is apply z-indicies to sibling elements to ensure the correct stacking order.
您不能只将 z-index 应用于下拉菜单 - 您需要做的是将 z-indicies 应用于同级元素以确保正确的堆叠顺序。
Without seeing your HTML, it's not possible to determine where they should go. But the best I can say is apply a z-index to your entire nav bar and one to your entire content div. Keep in mind that, as Ajay said, in order for z-indicies to work correctly the elements they are applied to have to be positioned non-statically (in your case position: relative would most likely be the best option).
如果没有看到您的 HTML，就无法确定它们应该去哪里。但我能说的最好的方法是将 z-index 应用到整个导航栏，将一个 z-index 应用到整个内容 div。请记住，正如 Ajay 所说，为了使 z-indicies 正常工作，它们所应用的元素必须非静态定位（在您的情况下，位置：relative 很可能是最佳选择）。
回答by sheng wang
If dropdown menu's parent element is nav, you should put z-index a large number to it, higher than other element
如果下拉菜单的父元素是 nav，你应该把 z-index 放在一个很大的数字上，高于其他元素
回答by Zag
I had the same issue on safari iPhone/iPad, and only Fabien's solution fixed it:
我在 Safari iPhone/iPad 上遇到了同样的问题，只有 Fabien 的解决方案修复了它：
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
