- 締切済み
ie6での重なり順（z-index）について
ie6では親要素の重なり順が絶対だと思うのですが、 例えば以下のようなソースで#a-2が#bより上で#b-2より下、という事は実現出来ないのでしょうか？ <div id="a"> <div id="a-2"> </div> </div> <div id="b"> <div id="b-2"> </div> </div> 今自分でやってみている限りでは、#bが#a-2の下に来た時点で、#bの要素である#b-2を#a-2よりも前面に表示させる事が出来ていません。 何かやり方があればご教授いただけないでしょうか。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかっていませんので、いい加減に実験してみただけですが… こんなのではダメでしょうか？ （* 確認用にサイズ指定と背景色がついてます。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #a-2 { z-index:10; position:relative; } #b-2 { z-index:20; position:relative; } /* 以下テスト用 */ #a { background-color:#fdc; } #a-2 { width:300px; height:150px; background-color:#ffc; } #b { margin-top:-150px; margin-left:100px; background-color:#cdf; } #b-2 { width:100px; height:50px; background-color:#cff; } </style> </head> <body> <div id="a"> [#a]_top <div id="a-2"> [#a-2] </div> [#a]_bottom </div> <div id="b"> [#b]_top <div id="b-2"> [#b-2] </div> [#b]_bottom </div> </body> </html>
- metametamu
- ベストアンサー率51% (153/295)
確認していないのでちゃんとできるかはわかりませんが、基本的にHTMLはソースの下に書けば上の方に重なるのでそれを利用されてはどうでしょうか。#aと#bを逆にマークアップしておきます。 <div id="b"> <div id="b-2"> </div> </div> <div id="a"> <div id="a-2"> </div> </div> #bと#aにはpositionは指定せずにネガティブマージンで重ねて、#b-2と#a-2にのみpositionとz-indexを指定します。
お礼
回答ありがとうございます。 ややこしくなるかと思って簡略化して書いたのですが、 aはヘッダ、b-2がレフトナビゲーション、bがレフトナビゲーションとコンテンツを囲んでいるボックスです。 実現しようとしているのはヘッダーのロゴ周りの画像がメイン部分の背景よりも前でレフトナビよりも下、というものです。 それに、すでにhtmlとcssを組み終わった後でのデザイン変更なので 根本からhtmlをひっくり返すのはちょっとやりたくない感じです。 cssのみで実現したいのですが、やはり無理なのでしょうか・・・。