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

Question

免责声明：我意识到这是一个很长的镜头 - 我无法提供有效的jsfiddle，也无法提供代码的子集。

我正在对此网站进行最后润色：http://dev.rebelsauce.co < Edit: link corrected

重现的步骤：

1. 在iPad上打开网址
2. 点击右下角的齿轮图标
3. 内容后面会出现一个带有“Logout”的bootstrap popover。在/ store页面中，您实际上可以滚动浏览产品的末尾，您会看到它出现在#page-products div后面。

桌面浏览器的屏幕截图：



在桌面浏览器（Chrome Win，Chrome OSX，Safari OSX）上，“Logout”弹出窗口的z-index按预期工作 - 它设置为position: relative; z-index: 300;，#page-products和{{1 divs都设置为.page-content。

然而，在iPad上，z-index并未受到尊重。不幸的是，我不知道移动Safari上的任何浏览器开发工具，我无法使用CSS来确定导致它的原因。我已经尝试将各种父元素设置为postition: relative; z-index: 202 (and 203)，但无济于事。

我花了很多时间搜索“boostrap popover z-index ipad”这样的关键词，但仍然没有运气。

Answer 1

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

如果您使用的是Mac，那么可以使用iOS Safari中的开发者工具。下载xCode，运行iOS模拟器，然后导航到您的页面。然后，在OSX Safari中，在“开发”菜单下选择“iPad模拟器”部分中的页面。