プルダウンメニューを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="text01"><a href="">１１１１</a>２２２２</span>
<span class="text01"><a href="">３３３３</a>４４４４</span>
<span class="text01"><a href="">５５５５</a>６６６６</span>
</div>
</div>
<div class="footer"></div>
</body>
</html>
プルダウンメニューを表示した状態。
プルダウンメニューから"contents"の文字が透けて見えて、プルダウンメニューの下の方を選択しようとするとプルダウンメニューが消えてしまう。
それを改善する一つの方法が「.menu{position:relative;z-index:1;}」としてプルダウンメニューを"contents"よりも上にする。
<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>
これでプルダウンメニューは透けなくなり、プルダウンメニューが消えることもなくなる。しかし、これだと"contents"の文字にアクセスできなくなる。
もう一つの改善方法は「.block_menu{position:relative;}」としてプルダウンメニューを載せている"block_menu"を "contents"よりも上にする。
<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{position:relative;}
/* .menu{position:relative;z-index:1;} */
.container{}
.contents{}
/* .text01{position:relative;z-index:2;} */
-->
</style>
これでプルダウンメニューは透けなくなり、プルダウンメニューが消えることもなくなる。しかし、これでも"contents"の文字にアクセスできなくなる。
そこで、「.text01{position:relative;z-index:2;}」を追加して"contents"の文字を高くしてみたが、「.menu{position:relative;z-index:1;}」とした場合も「.block_menu{position:relative;}」とした場合も、 プルダウンメニューが消える基本形と同じ症状に戻ってしまう。
「.menu{position:relative;z-index:2;}」と「.text01{position:relative;z-index:1;}」あるいは「.block_menu{position:relative;z-index:2;}」と「.text01{position:relative;z-index:1;}」のセットにしたら、「.text01{position:relative;z-index:2;}」を追加しなかった時と同じで"contents"の文字にアクセスできなくなる。
ちなみに、基本形に「.container{position:relative;}」を追加すると、プルダウンメニューが "container"の下に隠れてしまう。
<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{position:relative;}
.contents{}
/* .text01{position:relative;z-index:2;} */
-->
</style>
私が遭遇していたのはこのトラブルだったと思われる。
この「.container{position:relative;}」がある場合、「.block_menu{position:relative;}」を追加してもプルダウンメニューが隠れる症状は改善しないが「.block_menu{position:relative;z-index:1;}」や「.menu{position:relative;z-index:1;}」なら改善する。ただし、"contents"の文字にはアクセスできない。さらに「.text01{position:relative;z-index:2;}」を追加すればプルダウンメニューが隠れないだけでなく"contents"の文字にアクセスできるようになるが、上記と同じで、プルダウンメニューが透けて、プルダウンメニューの下の方を選択しようとするとプルダウンメニューが消えてしまう。
基本形に戻って「.contents{position:relative;}」を追加すると、 「.container{position:relative;}」を追加した時と違って、プルダウンメニューは隠れないが、プルダウンメニューの下の方を選択しようとするとプルダウンメニューが消えてしまう。「.container{position:relative;}」が無い場合は、プルダウンメニューが消えるのはポインタを"contents"の文字の上になる場合だけだったが、「.container{position:relative;}」があると、ポインタが"contents"の文字の上になるとプルダウンメニューが消えてしまう。また、"contents"の枠がプルダウンメニューから透けて見えるようになる。
<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{position:relative;}
/* .text01{position:relative;z-index:2;} */
-->
</style>
この"contents"が透けてプルダウンメニューが消えてしまう問題は「.block_menu{position:relative;z-index:1;}」や「.menu{position:relative;z-index:1;}」で改善するが、やはり上記と同じように"contents"の文字にアクセスできなくなる。さらに「.text01{position:relative;z-index:2;}」を追加すれば"contents"の文字にアクセスできるようになるが、その文字の上にあるプルダウンメニューを選ぼうとするとプルダウンメニューが消える問題が再発する。
ここまでの症状は【君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA】を読んだら納得できた。
この問題が改善しない限り、プルダウンメニューをiframeの中に入れることができない。
今回の試行錯誤はここまで。
2021/4/21 14:40頃。
コメント
コメントを投稿