1

これは、以下に関するより高度なCSSの質問である可能性がありますz-index。

あなたはそれをhttp://jsfiddle.net/cPdge/6/で見ることができます

現在のFirefox、Chrome、Safari、またはIE 9を使用すると、親DIVの上に青いDIVが表示されます。

青いボックスを親DIVの下に配置するにはどうすればよいですか？ 注：親DIVのz-indexが削除された場合、青いDIVはその下に入りますが、z-indexが削除されず、そのまま残っている場合はどうなり0ますか？ なぜ指定されているか指定されていないことが違いを生むのz-indexですか？通常、指定されたものはどれもと同じではありません。0z-index0

そのページのコードは次のとおりです。

    <div id="box1">
        some content
        <div id="subbox1">blue
        </div>
        <div id="subbox2">orange
        </div>
    </div>​

およびCSS：

#box1 { width: 600px; height: 400px; border: 6px dashed orange; 
  position: absolute; top: 100px; left: 100px; background: #ffe; z-index: 0 }

#subbox1 { width: 300px; height: 200px; border: 6px dashed orange; 
  position: absolute; top: 310px; left: 100px; background: #eff; z-index: -10000 }

#subbox2 { width: 300px; height: 200px; border: 6px dashed orange; 
  position: absolute; top: 210px; left: 200px; background: #fc9; z-index: 2000 }
4

1 に答える 1

2

ネガz-indexがbox1配置されていない場合は機能します。そうでない場合、サブボックスは子スタック コンテキストにあり、親ボックスの下に配置できません。

http://jsfiddle.net/cPdge/7/

z-index が 0 の場合、または z-index が指定されていない場合に違いが生じるのはなぜですか?

リンク先のドキュメントでのこれに対する答え: 新しいスタック コンテキストを作成するには、要素を配置し、宣言する必要がありますz-index(またはopacity1 未満で、少し奇妙です...)。

于 2012-05-19T17:11:00.247 に答える