0

私が次を持っていると言う：

<div id="fader"></div>
<div id="wrapper">
    <div class="content">Blah Blah</div>
    <div class="content">Blah Blah</div>
    <div class="content">
         <div id="form">form goes here</div>
</div>
<div id="form2">Form goes here</div>

これで、ボタンがクリックされるまで#formは実際には表示されません。その時点で、フェーダーでページ全体を黒く塗りつぶしたいのですが、＃formが表示されます。

とを使用してこれを機能させてposition: absoluteいますz-index。これで、＃wrapperは#faderのz-indexよりも低いz-indexに設定されます。#form z-indexを#faderより高くしたいのですが、それでも#wrapperの中にあります！とにかくこれを行うことはありますか？

ありがとう

4

2 に答える 2

2

Z-indexは、配置された要素にのみ適用されます。

http://jsfiddle.net/sSKZS/1/

#wrapper {z-index: 1; position: relative;}
#fader {z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#form2 {z-index: 3; position: absolute;}
于 2013-02-08T03:06:36.033 に答える
0

いいえ、＃formは#wrapperのコンテキスト内で設定されているためです。

＃fader、＃wrapper、および＃form2を高速道路を高速で走るバスと考えると、それらはすべて互いに通過したり、車線を合流したりすることができます。 #wrapperであり、「バス」内を移動できますが、バス内に閉じ込められています。（CSSによっては、＃formが.contentの別のコンテキストにネストされている場合がありますが、それは少し範囲外です。）

JavaScriptイベントを使用して動的に、またはページの読み込み時に、＃formを#wrapperから本文に移動する必要があります。しかし、いずれにしても、バスに乗ることはできません。

于 2013-02-08T03:23:28.753 に答える