iOS Safari Z-index 不起作用答案

【问题标题】：iOS Safari Z-index not workingiOS Safari Z-index 不起作用
【发布时间】：2020-03-04 11:23:02
【问题描述】：

我有一个 HTML 下拉菜单，但它被 iOS 上的其他页面内容隐藏。下拉列表在 Android 和 PC 上完美显示，但拒绝出现在 iOS Safari 浏览器上（在 iOS 9 和 10 上测试）。

我为下拉列表指定了一个较高的 z-index，为页面内容指定了一个较低的 z-index。我也试过：

-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);

没有运气。

这是我的 CSS：

下拉菜单

.dropdown-content2 {
    display: none;
    position: fixed;
    left: 10%;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 99;
    font-size: 13px;
    width: 50%;
    height: 300px;
    overflow-y: auto;        
    -webkit-transform: translate3d(0,0,1px);
    transform: translate3d(0,0,1px);  
}

页面内容

.newmain{
  margin-left:0px;
  margin-top: 130px;
  padding: 20px;
  z-index: 90;
}

【问题讨论】：

您应该包含带有此类问题的浏览器版本。可能不支持其他使用的 css 属性之一。在caniuse.com 上，您可以查看哪个浏览器支持哪些功能。尝试通过暂时删除一些 css 来缩小范围，直到您确定问题确实是 z-index。
抱歉，iOS 9 和 10
然后尝试缩小范围。我怀疑这是一个 z-index 问题。桌面版 Safari 怎么样？
桌面版也不行。我尝试完全删除overflow-y，但仍然没有成功。

标签： html ios css

【解决方案1】：

这不是 Z-index 问题。结果下拉列表的父元素设置为overflow: hidden。将其设置为Overflow: visible 解决了它。谢谢。

【讨论】：

【解决方案2】：

在我的例子中，我发现元素的容器应该在顶部。

我看到了这个：-webkit-overflow-scrolling: touch;

然后我将其替换为-webkit-overflow-scrolling: auto !important;

这解决了我的错误。

希望对你有帮助！

【讨论】：

【解决方案3】：

-webkit-overflow-scrolling: auto !important;

为我工作。

【讨论】：

【解决方案4】：

这很奇怪，z-index 可以进行 Safari 浏览。

您没有使用position: relative 或.newmain 中的任何位置， z-index 没有位置是行不通的。

尝试将位置添加到.newmain

【讨论】：

我尝试过相对、固定和绝对定位，但还是不行。
尝试将top: {any}px 添加到您的.dropdown-content2 中，可能它出现在上方某处，因为固定位置很奇怪，并且与父元素的位置无关