Question

我正在制作网络应用程序。当我显示叠加时，它覆盖了我的整个屏幕，甚至是具有更大z-index的元素。当我在console.log中指定z-indexes时，overlay为20，内容为80。

现在，我在前面想要的div嵌套在另一个div中。这可能是问题吗？它适用于所有浏览器（FF，safari，chrome），但移动游侠（iPhone）除外。

<body>
<div id="overlay"></div>
<div id="content">
 <div id="thisInFront"></div>
</div>
</body>

$("#overlay").fadeIn();
$("#thisInFront").animate({"top":"60%"},1000);

有没有办法让DIV在前面？或者我是否必须嵌套我的DIV？

Answer 1

以下是适用于iOS Safari的解决方案：http://jsfiddle.net/ansonhoyt/E8yyH/

元素默认为position: static。为了应用z-index，您需要使用以下内容将元素拉出静态页面：#thisInFront {position: relative}。 jsfiddle示例显示了一个固定位置#overlay，覆盖整个视口，其上方有#thisInFront。在iPhone 4S上通过iOS Safari 6.0验证。

screenshot of jsfiddle

W3cschools.com defines static position as：“元素按顺序呈现，因为它们出现在文档流程中”

查看问题z-index not behaving as i'd expect。这没有叠加，但适用相同的规则。

在safari手机上的z-index

1 个答案: