- ベストアンサー
IE7でのz-index対応について
- IE7でのz-index対応についての対応方法について教えてください。
- IE7でのz-index対応についてのコーディング方法を教えてください。
- IE7でのz-index対応についての注意点を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
1) HTML上の順番を変える。 2) 親コンテナブロックのz-indexで指定する。 (2)の場合 手持ちサンプルです。 ※タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.nav, div.affiliate{ ＿width:100%;height:40px;line-height:40px; ＿text-align:center; } div.nav{position:absolute;top:0;left:0;z-index:3;} div.nav ul, div.nav ul li, div.affiliate ul, div.affiliate ul li{ ＿display:block;list-style:none; ＿margin:0;padding:0; } div.nav ul li, div.affiliate ul li{width:24%;float:left;} div.nav ul li a, div.affiliate ul li a{ ＿display:block;width:100%;height:100%; ＿text-decoration:none;border:solid 1px gray; } div.nav ul li a{background-color:yellow;} div.affiliate ul li a{background-color:lime;} div.nav ul li ul li{width:100%;} h1{z-index:0;margin-top:40px;} div.affiliate{z-index:0;} div.nav ul li ul{display:none;} div.nav ul li:hover ul{display:block;} --> ＿</style> </head> <body> ＿<div class="nav"> ＿＿<ul> ＿＿＿<li><a href="/section1">Section1</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="/section1-1">Section1-1</a></li> ＿＿＿＿＿<li><a href="/section1-2">Section1-2</a></li> ＿＿＿＿＿<li><a href="/section1-3">Section1-3</a></li> ＿＿＿＿＿<li><a href="/section1-4">Section1-4</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li><a href="/section2">Section2</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="/section2-1">Section2-1</a></li> ＿＿＿＿＿<li><a href="/section2-2">Section2-2</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li><a href="#section3">Section3</a></li> ＿＿＿<li><a href="#section4">Section4</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="/section4-1">Section4-1</a></li> ＿＿＿＿＿<li><a href="/section4-2">Section4-2</a></li> ＿＿＿＿＿<li><a href="/section4-3">Section4-3</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ul> ＿</div> ＿<h1>サンプル</h1> ＿<div class="affiliate"> ＿＿<ul> ＿＿＿<li><a href="./A">ABCD</a></li> ＿＿＿<li><a href="./B">BCDE</a></li> ＿＿＿<li><a href="./C">CDEF</a></li> ＿＿＿<li><a href="./D">DEFG</a></li> ＿＿</ul> ＿</div> </body> </html>
お礼
親コンテナブロックのz-indexの数値に差をつけるだけで対応できるのですか。てっきりその子要素などにもいちいちdivタグでくくっていかなきゃならないと思いました。それが億劫だったので、順序入れ替えて、positionで強引に上側に移動させて表示していました。 回答ありがとうございます！