- ベストアンサー
z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。 div#aaa、div#bbbともに"position: absolute;"で「絶対配置」を定義されているのに対し、その後に続く<p>いいい（省略）</p>の位置決めはディフォルト値の"static"のままですので、<p>いいい（省略）</p>のレンダリング開始位置は「絶対配置」されたdiv#aaa/div#bbbと同じ基点になってしまい、結果としてそれらと重なって表示されてしまうことになります。 以下の回避策はANo.1の回答者様と基本的な考え方は同じです。 div#aaa/div#bbbに「決められた高さ」が定義されていれば、下に続くブロック<p>いいい（省略）</p>に対し、その高さ＋αの余白を与えればdiv#aaa/div#bbbが終了した位置からのレンダリングとなる為、重なることを回避できます。 質問者様のソースにはDTD宣言がありませんでしたが、XHTML形式でmetaタグによるエンコーディング指定が入っていたので、とりあえず以下の標準準拠モードでの検証にしておきました。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> （省略） <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>ううう（省略）</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええ（省略）</p> </div> <p class="hoge">いいい（省略）</p> （省略） --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- div#aaa { z-index: 2; position: absolute; width: 300px; height: 250px; } div#bbb { z-index: 1; position: absolute; width: 300px; height: 250px; } p.hoge { margin-top: 300px; } --------------------------------------------------------------------- div#aaa/div#bbbをレンダリングするのに充分な高さを仮に250pxとし、p.hogeの上余白にそれより少し多めの300pxを与えています。 ただし、この方法は、div#aaa/div#bbbの内容が「高さ」が予め決められる性質のものである事が前提条件となっています。サンプルを見る限り、内容はテキストメインのものであり、テキスト量も一定ではないと思われます。その場合は万が一、はみ出した際の処理も必要になってきます。div#aaa/div#bbbに"overflow: auto;"を定義しておけば、はみ出した分は自動的にスクロールバーを出して表示してくれますが、レイアウト上、それでは困る、という事もあるかも知れません。 今回のJavaScriptでは、"visibility: visible"と"visibility: hidden"を切り替えることで表示/非表示を制御していますが、と"display: block"（div#aaaの初期値）と"display: none"（div#bbbの初期値）を切り替えるスクリプトに変更すれば、"position: absolute;"が不要となる為、div#aaa/div#bbbの高さが流動的であっても、p.hogeはそれらが終了した位置からレンダリングされる様になります。「"visibility: hidden"＝要素が生成するボックスを不可視（透明）にする（ボックス分の領域は空白として存在している）」に対して「"display: none"＝何も表示しない（当該要素分の空白も生成されない）」である為です。もしスクリプトが変更できる様であれば、こちらの方法も試してみてはいかがでしょうか。
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
'aaa'と'bbb'を div#aaabbb { position: relative; width: 300px; height: 150px; } で囲って、高さも指定してみます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <style type="text/css"> div#aaabbb { position: relative; width: 300px; height: 150px; } div#aaa { z-index: 2; position: absolute; top: 0px; left: 0px; width: 300px; } div#bbb { z-index: 1; position: absolute; top: 0px; left: 0px; width: 300px; } </style> </head> <body> <h1> あああ </h1> <p> <a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a> </p> <div id="aaabbb"> <div id="aaa" style="visibility: visible"> <h2> ううう </h2> <p> うううううううう <br /> うううううううう </p> </div> <div id="bbb" style="visibility: hidden"> <h2> えええ </h2> <p> えええええええええ <br /> えええええええええ <br /> えええええええええ <br /> えええええええええ <br /> えええええええええ </p> </div> </div> <p> いいいいいいいいい <br /> いいいいいいいいい </p> </body> </html>
お礼
回答ありがとうございます。 囲ってみたところ大丈夫になりました！ シンプルな方法でスマートですね。 助かりました。
お礼
回答ありがとうございます。 さらに詳細な説明も付けていただき勉強になりました。 <p>いいいい</p>のレンダリングがどうなっているのか、よくわからなかったのでこれでスッキリです。 divの高さに関しての配慮もそのとうりでして、実際は流動的なものとなっております。 javascriptの制御ポイントまで教えていただき、本当にありがとうございました。