IE6もFirefoxでも、z-indexが効かなくて、困ったことが起こった。
前にもブログで「IE6のz-indexがうまく効かないときの簡単な対処法」を書いたけど、
あれば上下左右中央揃えの場合の対処法。
まぁでも、今回もその対処法で一応解決できたから一応記録です。
特徴は以下のとおり。
①ブラウザの横幅の大きさを小さくしても大きくしても、同じ場所でとまる。
②divで1回はくくり、横幅を指定するが、基本的にそのdiv内であれば、どこの位置でも固定されるボックスを作ることができる。
③z-indexが効く（有効になる）
動作確認済み
IE6,Firefox3.5.16
わかる人には見た方が早いと思うので、ポイント部分だけ赤字にします。
CSS↓
body{
margin: 0;
padding: 0;
color: #333333;
text-align: center;
}
#container {
position: relative;
margin: 0 auto;
padding: 0;
text-align: left;
width: 800px;
height: 400px;
background: #ddd;
overflow: hidden;
}
div#Box{
clear: both;
height: 102px;
position: absolute;
width: 200px;
right: 0;
top: 0;
z-index: 10;
background: #000;
}
margin: 0;
padding: 0;
color: #333333;
text-align: center;
}
#container {
position: relative;
margin: 0 auto;
padding: 0;
text-align: left;
width: 800px;
height: 400px;
background: #ddd;
overflow: hidden;
}
div#Box{
clear: both;
height: 102px;
position: absolute;
width: 200px;
right: 0;
top: 0;
z-index: 10;
background: #000;
}
HTML↓
<body>
<div id="container">
<p>テキストがどんなにあろうが固定です。</p>
<div id="Box"></div>
</div>
</body>
<div id="container">
<p>テキストがどんなにあろうが固定です。</p>
<div id="Box"></div>
</div>
</body>