「position:absolute」のIEのバグへの対処方法

質問

CSS
#navbar {
position: absolute;
z-index: 1
}

HTML
<div id="navbar">
略
</div>
<div id="contents">
略
</div>

CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。
このため「position:relative;」としてみたのですが．．
メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。

なにかよい方法はありますでしょうか。

回答No.2

mocchi_mo · ベストアンサー

細かな内容が分らないので、上手く説明出来ませんが、妥協案としては
position: relative;した要素のmargin-bottom等にネガティブマージンを
適用（-○○px等）してあげて、IE6対策でoverflow:hiddenを使えば
対処療法にはなるのでは。。

私の場合、position:absoluteして消えた場合は、基本前後のfloatが影響しているか、
text-align等が悪さしているか、たまにz-indexで後ろに隠れてしまっている
か、絶対配置の基準になるposition:relativeの位置がおかしいかを考え、一つづつ潰していきます。

お礼

回答有難うございました。
CSSについてまだ素人なので、片っ端からネット検索かけてプルダウンメニューのサンプルを探し、色々試してデザイン・動作とも上手く使えそうなものにHTMLと併せて書き直しました。
今回のご回答については、HPの改定時にまた役立てようと思います。

回答No.1

mocchi_mo

私のほうで詳しく実験したわけでは無いのですが、
下記の参考URLのサイトが役に立つのではないでしょうか？

参考URL：

http://jmblog.jp/archives/180

お礼

ご紹介のサイトは既に見ていました。「clear」は使用してないので「width:100% の float」だと思ったのですが、不具合はIE7でなので、それも違う。とりあえず「<div class="extra">extra box</div>」の追加を試しましたが何も変わりませんでした(~_~)