ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：rody555 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>を表示させたいのですが、後ろに回って表示されません。
これを表示させる方法をご存じでしたら教えてください。
質問投稿日時：08/04/10 12:23
質問番号：3937220
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril > 切り替わる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"＝何も表示しない（当該要素分の空白も生成されない）」である為です。もしスクリプトが変更できる様であれば、こちらの方法も試してみてはいかがでしょうか。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/04/10 14:42
回答番号：No.2
この回答へのお礼回答ありがとうございます。
さらに詳細な説明も付けていただき勉強になりました。
<p>いいいい</p>のレンダリングがどうなっているのか、よくわからなかったのでこれでスッキリです。
divの高さに関しての配慮もそのとうりでして、実際は流動的なものとなっております。
javascriptの制御ポイントまで教えていただき、本当にありがとうございました。

回答

良回答10pt
回答者：auty '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>
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/10 13:47
回答番号：No.1
この回答へのお礼回答ありがとうございます。
囲ってみたところ大丈夫になりました！
シンプルな方法でスマートですね。
助かりました。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ