2 月 18 2009

IE6でposition:absoluteの要素が表示されないバグ

Posted by tanjo at 4:32 PM

前回の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 とセットで使った方が吉」。

One Response to “IE6でposition:absoluteの要素が表示されないバグ”

  1. くむ2010.05.13 at 6:51 PM

    ありがとうございました。
    助かりました!!

Leave a Reply