jquery - CSS z-index 不适用于 iPad 上的 bootstrap popover

Question

免责声明:我意识到这是一个远景——我无法提供有效的 jsfiddle，也无法提供代码的子集。

我正在对这个网站进行最后的润色:http://dev.rebelsauce.co <强> < Edit: link corrected

重现步骤:

1. 在 iPad 上打开 url
2. 点击右下角的齿轮图标
3. 带有“注销”的 Bootstrap 弹出窗口将出现在内容后面。从/store 页面，您实际上可以滚动到产品的末尾，您会看到它出现在 #page-products 后面。分区

来自桌面浏览器的屏幕截图:

在桌面浏览器(Chrome Win、Chrome OSX、Safari OSX)上，“注销”弹出窗口的 z-index 按预期工作 - 它设置为 position: relative; z-index: 300; , 和 #page-products和 .page-content div 都设置为 postition: relative; z-index: 202 (and 203) .

然而，在 iPad 上，z-index 并没有得到遵守。不幸的是，我不知道移动 Safari 上的任何浏览器开发工具，所以我无法使用 CSS 来确定是什么导致了它。我试过将各种父元素设置为 position: relative;但无济于事。

我花了相当多的时间搜索关键字，例如“boostrap popover z-index ipad”，但仍然没有成功。

Answer 1

将 footer z-index 设置为 300 为我修复了它，尽管我不知道这样做是否出于其他原因是不可取的。

如果您使用的是 Mac，您实际上可以将开发人员工具与 iOS Safari 一起使用。下载 xCode，运行 iOS 模拟器，然后导航到您的页面。然后，在 OSX Safari 中，在“开发”菜单下选择“iPad 模拟器”部分中的页面。