投稿

ラベル（z-index）が付いた投稿を表示しています

モーダルウインドウで隠れないコンテンツがあるバグのコード

 サイドバーのあるウェブページでメインブロックから全面のモーダルウインドウを開いたらサイドバーのコンテンツの一部が隠れなかった問題を再現するためのコード。 メインブロックに z-index:0 があることで、メインウインドウとは親が異なるサイドバーは重なった場合にメインウインドウの上面に表示してしまう。 モーダルウインドウはメインウインドウ内にあるため、z-indexの値を大きくしてもメインウインドウ内で最上面に表示されるだけで、その後にサイドバーを描画したらサイドバーの方が上面になる。htmlのコードでサイドバーの方を先に記述していれば、サイドバーの後にメインウインドウを表示するので、重なった場合もメインウインドウの方が上面になり、モーダルウインドウは最上面になる。 モーダルウインドウをメインウインドウの外に出せば、 z-indexの値が効果を持つようになり、最上面に表示させることができる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure Original Code</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style>     #main{       z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */       position: relative; /* z-indexを有効にするため */       border: 3px dashed #000;       padding: 10px;       text-align:...
コメントを投稿
続きを読む

プルダウンメニューをiframeの中に入れる試行錯誤 その２

イメージ
  【プルダウンメニューをiframeの中に入れる試行錯誤 その１】 の続き。 基本形   <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style> <!-- *{font-size:18px;box-sizing: border-box;} body{width:821px;} .block_menu{height:50px;background-color:red;} .menu{width:100%;border:none;height:300px; border:10px solid pink; } .container{height:300px;background-color:white;} .contents{height:100%;border:2px solid green;} .footer{height:40px;background-color:black;} .block_menu{} /* .menu{position:relative;z-index:1;} */ .container{} .contents{} /* .text01{position:relative;z-index:2;} */ --> </style> </head> <body> <div class="block_menu"> <iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe> </div> <div...
コメントを投稿
続きを読む

プルダウンメニューをiframeの中に入れる試行錯誤 その１

イメージ
 基本形  <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>テスト</title> <style> <!-- *{font-size:18px;} body{width:801px;} .block_menu{height:50px;background-color:red;} .menu{width:100%;border:none;height:300px;} .container{height:300px;background-color:white;} .contents{height:100%;border:2px solid green;} .footer{height:40px;background-color:black;} .block_menu{} /* .menu{position:relative;z-index:1;} */ .container{} .contents{} /* .text01{position:relative;z-index:2;} */ --> </style> </head> <body> <div class="block_menu"> <iframe src="http://hitorinezumi.html.xdomain.jp/template/menu.html" class="menu" title="メニュー"></iframe> </div> <div class="container"> <div class="contents"> <span class=...
コメントを投稿
続きを読む

z-indexで上になっている要素だけでなく下の要素にもアクセスしたい場合の解決策と未解決問題

イメージ
 やりたいこと。 ４番目の図で"block_menu"の下に隠れた"container"のリンクをクリックできなかったり文字の選択もできなかったり、そこにポインタがあるとマウスのホイールでスクロールできなかったりする問題があった。とりあえず、リンクをクリックできるようにしたくて 「教えて!goo」 で質問。実際のソースでは "block_menu"の高さは固定して"block_menu"の内側の"menu"の高さを広げ、"container"の内側の"contents"のリンクにアクセスしたいので、そのことを踏まえて質問するためのソース。 「教えて!goo」 では分かりやすいidにしたけれど、ここでは実際のソースに合わせて変更。   <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>メニュー</title> <style> <!-- *{font-size:18px;} .block_menu{width:300px;height:50px;background-color:red;text-align:left;} .menu{width:250px;height:150px;border:10px solid pink;} .container{width:250px;height:200px;margin-left:20px;background-color:blue;} .contents{width:250px;height:150px;margin-left:20px;background-color:green;text-align:right;} .footer{width:200px;height:40px;b...
コメントを投稿
続きを読む