iOS 中奇怪的元素重叠 (PhoneGap)

Posted 2023-02-23

【中文标题】iOS 中奇怪的元素重叠 (PhoneGap)

【英文标题】：Weird Overlap of Elements in iOS (PhoneGap)

【发布时间】：2013-04-04 17:35:31

【问题描述】：

我正在开发一个 ios/PhoneGap 项目。我在 iOS 中有一个奇怪的重叠问题（来自 iPad 的屏幕截图）：

“选择状态”弹出框是position: absolute, z-index: 35。网站链接没有指定位置（所以static）并且没有指定z-index。

无论地址链接是没有链接的随机文本，还是链接（如捕获的），它仍然会发生。

这是它在 Chrome 中的样子（如预期的那样）（在视网膜 Mac 上拍摄，所以它很大）：

我整天都在 iPad 上的 Safari 控制台中尝试调整 z-index，但没有任何效果。 这似乎不是一个“简单”的 z-index 问题。所以请不要只说“调整 z-index”。

[edit] 具体来说，我尝试将弹出框的z-index 设置为5000，将网址设置为-10（给它几个不同的positions） ，并且我检查了这两个元素的每个祖先，以确保它们都没有z-indexes（他们没有）。我什至尝试给几个popover的祖先positions和z-indexes。什么都没有改变。 （为了避免被提出来，我确实尝试更改 colors 之类的东西，只是为了确保我的更改进入页面。）

谢谢。

【问题讨论】：

有没有办法让我们看看实际的源代码？

见谅，但由于您没有指定您尝试了负值，我建议尝试将地址链接的位置设置为 absolute ，并将 z-index 设置为负值。

它目前没有公开，即使我公开了它也受密码保护......另外，我必须给你实际的应用程序让你重现实际问题，多亏了 Apple 的配置政策，这将非常复杂！

@codeqi 对不起，我没有。但是我尝试了-10 的地址（将其设置为absolute 和relative）和5000 的弹出框。

试试这个***.com/questions/11836451/…。也许有帮助。

【参考方案1】：

所以这已经困扰我们的项目大约一个月了，但我想我解决了它。我还没有彻底测试过这个理论，但到目前为止它已经解决了我们所有的问题。

如果您还记得在 IE7 的日子里，有一个奇怪的 z-index 错误，您可以修复它的唯一方法是找到作为兄弟元素的违规元素的祖先并调整他们的 em> z-indexes。

例如，假设这是我的标记：

<div class="container">
    <div class="header">
        <button>
            Click Me

            <div class="dropdown">
                <ul>
                    <li>This</li>
                    ...
                </ul>
            </div>
        </button>
    </div>

    <div class="content">
        <div class="col1">...</div>
        <div class="col2">...</div>
        <div class="col3">www.example.com</div>
    </div>
</div>

和我的图片一样，它在 Chrome 中看起来是正确的，但在 iOS 中，www.example.com 高于 .dropdown。

他们的兄弟姐妹的祖先是.header 和.content。如果我将.header 的z-index（当然，将position 设置为relative）调整为高于.content，它就解决了这个问题。

希望这是有道理的，并对可能出现在此页面的任何内容有所帮助...

【讨论】：

这太棒了，谢谢！对于其他人：在上面的示例中设置 .header z-index: 2; 和 .content z-index: 1; 。

是的，这就是我想说的，哈哈……我想我可以更直截了当。我只是很困惑，这让人想起糟糕的 IE7 天。

谢谢，遇到了同样的问题！这解决了它！

传奇，也解决了我的问题。