Question

我在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;
}

Answer 1

var text = $('button').data('formname');

为我工作。

Answer 2

这不是Z-index问题。原来，下拉菜单的父元素已设置为overflow: hidden。将其设置为Overflow: visible即可解决。谢谢。

Answer 3

那很奇怪，野生动物园可以与z-index一起使用。

您没有使用position: relative或.newmain中的任何位置， z-index不能在没有位置的情况下工作。

尝试将位置添加到.newmain

Answer 4

就我而言，我发现元素的容器应该在顶部。

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

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

那解决了我的错误。

希望对您有帮助！

iOS Safari Z-index无法正常运行

4 个答案: