3

私はウェブアプリケーションを作っています。オーバーレイを表示すると、画面全体が覆われ、z-index が大きい要素も含まれます。z-indexes を console.log すると、オーバーレイは 20 で、コンテンツは 80 です。

今、私が前にしたいdivは他のdivにネストされています。これが問題になる可能性がありますか？モバイル サファリ (iPhone) を除くすべてのブラウザー (FF、サファリ、クロム) で動作します。

<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

iOSSafariで動作するソリューションは次のとおりです。http：//jsfiddle.net/ansonhoyt/E8yyH/

要素のデフォルトは。ですposition: static。z-indexを適用するには、次のような要素を静的ページから引き出す必要があります#thisInFront {position: relative}。jsfiddleの例は、#overlayビューポート全体をカバーする固定位置を示して#thisInFrontいます。iPhone4SのiOSSafari6.0で確認済み。

jsfiddleのスクリーンショット

W3cschools.comは、静的位置を次のように定義しています。「要素はドキュメントフローに表示されるとおりに順番にレンダリングされます」

質問をチェックしてください。z-indexが期待どおりに動作していません。これにはオーバーレイはありませんが、同じルールが適用されます。

于 2012-11-19T16:59:09.250 に答える