前回の上下左右中央揃えにしたやつに続けて問題ができた。
位置を固定したい画像が出てきたのだ。
条件は以下のとおり。
・FLASHの上にPNG画像を重ねたい。
→FLASHの上に重ねたいものがあるときは以下の部分を追記すると解決します。
①<param name="movie" value="ファイル名" />の後ろに<param name="wmode" value="transparent" />
②<embed ・・・の中に wmode="transparent"を挿入
・上下左右中央揃えにしたコンテンツの中で位置を固定したい。
もんもんと考えた結果、妥当なのはやはりz-indexを使うのが一番かと。
Firefoxは簡単に表示されるものなんですよ。
でもね、おバカなIE6が表示してくれなくてね・°・(ノД｀)・°・
みくさんマジ泣いちゃいますよ。。
いろんなサイトを参考にみて、私は気付いたのです！！
要は、親要素にposition: static;以外のrelativeとか入ってると、その親要素の方が、
優先されてしまい、z-indexが子要素で指定してても効かないというもの。
だから魔法の無かったことにしてくれるCSS、clear: both;を子要素で指定すればいいのだ！！
ということで、一応下記に記載。
CSS
---------------------------------------------
body{
margin: 0;
padding: 0;
text-align: center;
}
div#catch {
background: #FFF;
width: 100%;
height: 50%;
margin-top: -308px;
margin-left: -800px;
float: left;
}
div#wrap{
width: 800px;
margin: 0 auto;
}
div#logo{
clear: both;
position: absolute;
top: 50%;
left: 50%;
width: 260px;
height: 155px;
z-index: 1;
background: #000000;
margin: 153px 0 0 -400px;
}
div#container {
width: 800px;
height: 615px;
overflow: hidden;
clear: both;
text-align: left;
position: relative;
font-size: 1.8em;
}
div#flash{
float: left;
width: 800px;
height: 550px;
}
/* Hide from IE5mac *//*/
div#catch {
display: none;
}
html, body {
height: auto;
}
/* end hack */
HTML
---------------------------------------------
<div id="catch"></div>
<div id="wrap">
<div id="container">
<div id="flash"><script type="text/javascript" src="flash.js"></script></div>
<div id="Navigation"></div>
<div id="logo"><img src="./logo.png" /></div>
</div><!--/container-->
</div><!--/wrap-->
赤いところが固定されたやつです。
ちゃんとブラウザを小さくしても、消えていかないです(^-^)v
位置を固定したい画像が出てきたのだ。
条件は以下のとおり。
・FLASHの上にPNG画像を重ねたい。
→FLASHの上に重ねたいものがあるときは以下の部分を追記すると解決します。
①<param name="movie" value="ファイル名" />の後ろに<param name="wmode" value="transparent" />
②<embed ・・・の中に wmode="transparent"を挿入
・上下左右中央揃えにしたコンテンツの中で位置を固定したい。
もんもんと考えた結果、妥当なのはやはりz-indexを使うのが一番かと。
Firefoxは簡単に表示されるものなんですよ。
でもね、おバカなIE6が表示してくれなくてね・°・(ノД｀)・°・
みくさんマジ泣いちゃいますよ。。
いろんなサイトを参考にみて、私は気付いたのです！！
要は、親要素にposition: static;以外のrelativeとか入ってると、その親要素の方が、
優先されてしまい、z-indexが子要素で指定してても効かないというもの。
だから魔法の無かったことにしてくれるCSS、clear: both;を子要素で指定すればいいのだ！！
ということで、一応下記に記載。
CSS
---------------------------------------------
body{
margin: 0;
padding: 0;
text-align: center;
}
div#catch {
background: #FFF;
width: 100%;
height: 50%;
margin-top: -308px;
margin-left: -800px;
float: left;
}
div#wrap{
width: 800px;
margin: 0 auto;
}
div#logo{
clear: both;
position: absolute;
top: 50%;
left: 50%;
width: 260px;
height: 155px;
z-index: 1;
background: #000000;
margin: 153px 0 0 -400px;
}
div#container {
width: 800px;
height: 615px;
overflow: hidden;
clear: both;
text-align: left;
position: relative;
font-size: 1.8em;
}
div#flash{
float: left;
width: 800px;
height: 550px;
}
/* Hide from IE5mac *//*/
div#catch {
display: none;
}
html, body {
height: auto;
}
/* end hack */
HTML
---------------------------------------------
<div id="catch"></div>
<div id="wrap">
<div id="container">
<div id="flash"><script type="text/javascript" src="flash.js"></script></div>
<div id="Navigation"></div>
<div id="logo"><img src="./logo.png" /></div>
</div><!--/container-->
</div><!--/wrap-->
赤いところが固定されたやつです。
ちゃんとブラウザを小さくしても、消えていかないです(^-^)v