脳の中の風船

前回のCSSのz-indexを使ってFlashを背景表示する例にて、Internet Explorer 6 だと絶対配置（position:absolute）のFlash領域が消えてしまう、という問題があったんですが、無事解決できました。

IE6で position:absolute の要素が消えてしまう条件というのは結構ややこしくて、原因を見抜くのに一苦労してしまうことがありそうです。以下のサイトで詳しく検証されていました。

» jmblog.jp - IEで絶対配置（position:absolute）のボックスが消えるバグの検証

さて、私の場合はというと、絶対配置する要素の前で float を使っていたのが原因のようでした。（たぶん、一番陥りやすいパターン？）
事前に clear しておいてもなぜか効果がない（＝表示されないまま）の場合があるっぽく、一瞬つまずきましたが、絶対配置の要素自体に clear:both を使うことで解決！

#absolute {
	position: absolute;
	clear: both;
	...
}

教訓。「position:absolute は clear:both とセットで使った方が吉」。

技術ネタ | css, html
Trackback URI : http://phenotype.jpn.org/blog/archives/1374/trackback