• ベストアンサー

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>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.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"＝何も表示しない（当該要素分の空白も生成されない）」である為です。もしスクリプトが変更できる様であれば、こちらの方法も試してみてはいかがでしょうか。

rody555
質問者

お礼

回答ありがとうございます。 さらに詳細な説明も付けていただき勉強になりました。 <p>いいいい</p>のレンダリングがどうなっているのか、よくわからなかったのでこれでスッキリです。 divの高さに関しての配慮もそのとうりでして、実際は流動的なものとなっております。 javascriptの制御ポイントまで教えていただき、本当にありがとうございました。

その他の回答 (1)

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

'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>

rody555
質問者

お礼

回答ありがとうございます。 囲ってみたところ大丈夫になりました！ シンプルな方法でスマートですね。 助かりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。

    JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>

  • 表示/非表示の切り替え

    AAA、BBB、CCCの３つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか？ ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================

  • PHPの勉強中の初心者です。

    PHPの勉強中の初心者です。 PHPに詳しい人に教えてもらいながら以下のPHPを組みました。 内容はlist.cgiというテキストファイルをPHPで出力することです。 一応出力はできたのですが、出力するデータをテーブル内に埋め込みたいと思いますが、 PHPのファイルにどのようにtableタグを埋め込むべきかが分かりません。 （例）1,AAA BBB CCC<br /> DDD を　tdのセルに埋め込みたく。 どなかたご教授いただけませんでしょうか？どうぞ、よろしくお願いいたします。 list.cgi 1,AAA BBB CCC<br /> DDD 2,AAA BBB CCC<br /> DDD 3,AAA BBB CCC<br /> DDD <?php $datafile = "list.cgi"; //ファイルの読み込み $fr = fopen ( $datafile, "r" ); $alldata = fread ( $fr, filesize ( $datafile ) ); fclose ( $fr ); $alldata = str_replace ( "\r", "\n", $alldata ); $alldata = str_replace ( "\n\n", "\n", $alldata ); $alldata = explode ( "\n", $alldata ); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> </head> <body> <div style="width:240px"> <?php if($_GET["n"]){ for($i=0;$i<count($alldata);$i++){ $buff=explode(",",$alldata[$i]); if($buff[0]==$_GET["n"]){ print $buff[1]; print "<br />"; } } } ?> </div> </body> </html>

    • 締切済み
    • PHP
  • 下記のスクリプトを高速にする具体的な方法

    下記のスクリプトを高速にする具体的な方法 現在、特定のクラスを表示、非表示にしたいと 考えております。 下記のスクリプトだとIEでの動作が遅いので改善方法を模索しております。 どなたかご教授ください。 宜しくお願いいたします。 <script type="text/javascript"> var ids = new Array(); ids = ['default','aaa','bbb']; function change(site){ if(!document.getElementsByTagName){return;} var objs = document.getElementsByTagName('*'); var check = ids.join('|'); var re = new RegExp('(?:^|\\s)'+site+'(?:$|\\s)'); for(var i=0; i<objs.length; i++){ var obj = objs.item(i); if(re.test(obj.className)){ obj.style.display = ''; }else{ if(obj.className){ if(obj.className.match(check)){ obj.style.display = 'none'; }else{ obj.style.display = ''; } } } } } </script> <html> <select name="site_change" id="site_change" onchange="change(this.value)"> <option value="default">デフォルト</option> <option value="aaa">aaa</option> <option value="bbb">bbb</option> </select> <div class="aaa bbb">aaa bbb</div> <div class="aaa">aaa</div> </html>

  • IEでもFirefoxでも動作する点滅文字について

    IEでもFirefoxでも動作する点滅文字について Internet ExplorerでもFirefoxでも動作する点滅文字を作成するため、 下記のサンプルソースを作成したのですが、 Internet Explorer7では動作するものの、Firefox3.6では動作しませんでした。 その為、Internet ExplorerでもFirefoxでも動作する点滅文字の方法をご存知の方がいらっしゃいましたら、 ご教示の程、よろしくお願いします。 なお、下記の動作を想定しています。 1. 点滅時間は設定ファイルに記述して、点滅時間を調整したいと思います (その為、<blink>タグは使用できないかも知れません)。 2. ページ内の複数の箇所に設定したいと思います (ただし、設定箇所が何箇所になるかは、ページが動的に生成されているため、ランダムです。 その為、id属性で動作するものは使用できないかも知れません)。 3. MARQUEEタグを使用するものについては、位置あわせがうまく出来ませんでした。 【ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 800); } // --> </script> </head> <body onload="blink()"> <h1 class="blink">点滅サンプル</h1> <p>これは普通の文書</p> <p class="blink">これは点滅する文章</p> </body> </html> 以上、よろしくお願いします。

  • 動いてもよさそうなのに動かないのでどこが悪いか見て下さい。

    例：Aをクリックして表示 BをクリックしてAを消す、Bを出す。この時Bが出ずにはまる。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- .hide {display:none;} .show {display:block;} --> </style> <script type="text/javascript"> <!-- var flag=0; function red(a){ id="more"; mor = document.all.item(id,a) if (flag == 1){ if(mor.className=='show'){ mor.className="hide"; flag=0; } else { for (i = 0; i <= document.all.item(id).length; i++){ document.all.item(id,i).className="hide"; if(i == document.all.item(id).length){mor.className="show";} } } } else if(flag == 0){ mor.className="show"; flag=1; } } //--> </script> </head> <body> 例： 何もないときとりあえず今回はAを押すとAが開く(flag=0<br> Aがあいてる時、Aを押すとAを閉じる(flag=1 document.all.item(id,a).className=='show'<br> BやCを押すとAを閉じてBやCを開く(for文<br> for文のところのshowが上手くいかない。<br><br><br> <a href="javascript:red(0);">A</a> <div id="more" class="hide">Aの詳細</div> <br> <a href="javascript:red(1);">B</a> <div id="more" class="hide">Bの詳細</div> <br> <a href="javascript:red(2);">C</a> <div id="more" class="hide">Cの詳細</div> <br><br>概要<br> 1全部閉じてたら対象を開く<br> <br> 2-Yes対象が開いてたら対象を閉じる、1へ<br> <br> 2-No対象が閉じていたら全て閉じるfor文<br> 　　対象を開く//ここが上手くいかない<br> <br><br><br> ※対象はred(a)のdocument.all.item(more,a).classNameがshow（開）かhide（閉）か<br> ここの(more,a)のaは「a」番目のid「more」をもったオブジェクトのこと </body> </html>

  • CSSのID名に配列を使えませんか？

    以下のようなソースで、項目ごとにサブメニューの開閉をしようとしているのですが、サンプルの#a1～に該当するID名を、配列として定義することってできませんか？ <style type="text/css"><!-- #a1 { display:none; } #a2 { display:none; } #a3 { display:none; } // --></style> <script type="text/javascript"><!-- function disp(aaa) { obj = document.getElementById(aaa); if( obj.style.display =="block" ){ obj.style.display ="none"; }else{ obj.style.display ="block"; } } function create(bbb){ document.write(bbb); } // --></script> <body> ああああ<a href="javascript:void(disp('a1'))">◎</a><div id="a1"><script type="text/javascript">create("アアアア");</script></div><br> いいいい<a href="javascript:void(disp('a2'))">◎</a><div id="a2"><script type="text/javascript">create("イイイイ");</script></div><br> うううう<a href="javascript:void(disp('a3'))">◎</a><div id="a3"><script type="text/javascript">create("ウウウウ");</script></div><br>

  • 常にひとつだけ詳細表示する！の回答なのだけれど

    <html> <head> <style> .show {display:block;} .hide {display:none;} </style> <script> function yomu(n){ oj=document.getElementById('a').getElementsByTagName('DIV'); for(var i in oj) oj[i].className=(i==n)?'show':'hide'; } </script> </head> <body> <div id="a"> <a href="#" onClick="yomu(0)">A</a><br> <div class="hide">Aの詳細</div> <a href="#" onClick="yomu(1)">B</a><br> <div class="hide">Bの詳細</div> <a href="#" onClick="yomu(2)" >C</a><br> <div class="hide">Cの詳細</div> </div> </body> </html>

  • JSでページ内の表示を変えた時の問題について

    どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んで ページ内の表示を変更したときの問題なのですが、 選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻ると プルダウンメニューにはさきほど選択したものが残っているのですが、 変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか？ どなたか解決方法が分かりましたらご教授お願い致します。 【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>----　選んでください　----</option> <option value="1_1">　１ － いち</option> <option value="1_2">　２ － に－</option> <option value="1_3">　３ － さん</option> <option value="1_4">　４ － よん</option> <option value="1_5">　５ － ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【----　選んでください　----】</p> </div> <div id="1_1" style="display: none;"> <p>【１ － いち】</p> </div> <div id="1_2" style="display: none;"> <p>【２ － に－】</p> </div> <div id="1_3" style="display: none;"> <p>【３ － さん】</p> </div> <div id="1_4" style="display: none;"> <p>【４ － よん】</p> </div> <div id="1_5" style="display: none;"> <p>【５ － ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>

  • javascriptについて

    <script type="text/javascript"> //ウィンドウサイズの取得 getWindowSize(); //ウィンドウサイズを取得する function getWindowSize() { ZZZ = window.innerWidth; AAA = ZZZ * 0.98; BBB = (ZZZ * 0.98) * 0.5625; } document.write("<div style='border:1px solid; width:" + AAA + "px; height:" + BBB + "px;'>幅" + AAA + " 縦" + BBB + " <p></p></div><p></p>"); </script> 上記のように＜DIV>にウィンドウサイズに合わせて幅と縦を指定しているのですが、 ブラウザのウィンドウサイズが変更されたときに、＜DIV>のサイズも変更させたいのですが、 どのように記述すれば良いでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する