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;background-color:black;}
.block_menu{z-index:0;}
.menu{position:relative;z-index:3;}
.container{z-index:1;}
.contents{z-index:2;}
}
-->
</style>
</head>
<body>
<div class="block_menu">
<div class="menu">
<a href="">１１１１</a>２２２２<br>
<a href="">３３３３</a>４４４４<br>
<a href="">５５５５</a>６６６６<br>
</div>
</div>
<div class="container">
<div class="contents">
<a href="">１１１１</a>２２２２<br>
<a href="">３３３３</a>４４４４<br>
<a href="">５５５５</a>６６６６<br>
</div>
</div>
<div class="footer"></div></body>
</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;background-color:black;}
.block_menu{z-index:0;}
.menu{position:relative;z-index:3;}
.container{z-index:1;}
.contents{z-index:2;}
}
-->
</style>
</head>
<body>
<div class="block_menu">
<div class="menu">
<a href="">１１１１</a>２２２２<br>
<a href="">３３３３</a>４４４４<br>
<a href="">５５５５</a>６６６６<br>
</div>
</div>
<div class="container">
<div class="contents">
<a href="">１１１１</a>２２２２<br>
<a href="">３３３３</a>４４４４<br>
<a href="">５５５５</a>６６６６<br>
</div>
</div>
<div class="footer"></div></body>
</html>
「教えて!goo」で教えてもらった解決策を踏まえての解決策。
<!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;background-color:black;}
.block_menu{z-index:0;}
.menu{position:relative;z-index:3;}
.container{z-index:1;}
.contents{z-index:2;}
.text01 {position: relative;z-index:9999;}
-->
</style>
</head>
<body>
<div class="block_menu">
<div class="menu">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="container">
<div class="contents">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="footer"></div></body>
</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;background-color:black;}
.block_menu{z-index:0;}
.menu{position:relative;z-index:3;}
.container{z-index:1;}
.contents{z-index:2;}
.text01 {position: relative;z-index:9999;}
-->
</style>
</head>
<body>
<div class="block_menu">
<div class="menu">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="container">
<div class="contents">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="footer"></div></body>
</html>
実際のソースでは"menu"は"block_menu"の中のiframe。ただ、iframeだと"block_menu"のheightよりも高くならないので、 "block_menu"を"menu"が入るheightに変更して、"container"を上に移動して整えて確かめてみた。
<!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:200px;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;background-color:black;}
.block_menu{z-index:0;}
.menu{position:relative;z-index:3;}
.container{z-index:1;}
.contents{z-index:2;}
.container{
position:relative;
top:-150px;
margin-bottom:-150px;
}
.text01 {position: relative;z-index:9999;}
-->
</style>
</head>
<body>
<div class="block_menu">
<div class="menu">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="container">
<div class="contents">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="footer"></div></body>
</html>
.text01 {position: relative;z-index:9999;}
-->
</style>
</head>
<body>
<div class="block_menu">
<div class="menu">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="container">
<div class="contents">
<span class="text01"><a href="">１１１１</a>２２２２<br></span>
<span class="text01"><a href="">３３３３</a>４４４４<br></span>
<span class="text01"><a href="">５５５５</a>６６６６<br></span>
</div>
</div>
<div class="footer"></div></body>
</html>
再び、 "contents"の文字にはアクセスできなくなった。
もう一つ気になる点があって、「.block_menu{z-index:4;}」と一番高くしようとしても"block_menu"は高くならないこと。これは「.menu{position:relative;z-index:3;}」と同様に「.block_menu{position:relative;z-index:4;}」とすれば"menu"よりは低いままだが"container"や"contents"よりは高くなる。
この問題は頭が混乱しているので、継続中。
コメント
コメントを投稿