3

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

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

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

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

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

4

1 回答 1

0

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

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

jsfiddle的截图

W3cschools.com 将静态位置定义为：“元素按顺序呈现，就像它们出现在文档流中一样”

看看这个问题，z-index 的行为不像我预期的那样。这没有覆盖，但适用相同的规则。

于 2012-11-19T16:59:09.250 回答