こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSの「position:absolute;」属性について

どうしても理解できませんので、どうかお力添えをお願いいたします。
以下のかんたんな“カテゴリー”を、HTMLとCSSで作成しました。

-------------------------------------------------------------------
(HTML)
<div id="navi">
<div id="kategory">
<a href="http://~">テスト1</a>
<a href="http://―">テスト2</a>
</div>
</div>
-------------------------------------------------------------------
(CSS)
#navi{
width:180px;
} (幅180pxのBOXを作成)

#kategory a:link, #kategory a:visited{
display: block;
background-color:red;
border:solid 1px;
} (マウスカーソルがのっていないとき、背景色は赤色)

#kategory a:hover{
background-color:green;
} (マウスカーソルがのっているとき、背景色は緑色)
--------------------------------------------------------------------
「firefox」では問題なかったのですが、「Internet Explorer」ではリンク文字のところにカーソルをもっていかないと、背景色が赤色から緑色に変化しませんでした。
いろいろと調べてみた結果、

「position:absolute;
 top: 0px;」

をCSSの「#navi」のなかに書きたすことで、リンク文字以外の箇所にマウスをもってきても背景色が赤色から緑色に変化するようになりました。

どうして「position:absolute;」という属性を使うことにより、リンク文字以外のところへカーソルをもってきても、赤色から緑色へ変化するようになるのでしょうか?

どうか、よろしくお願いいたします。

投稿日時 - 2007-09-30 14:47:02

QNo.3389458

困ってます

質問者が選んだベストアンサー

こんにちは

Internet Explorerのバグです

http://www6.plala.or.jp/go_west/nextcss/tip/tech/sidemenu.htm

親要素に幅が設定されていないとそれでもできるのですが幅が指定してある場合にはテキスト部分しか判定されないようです

<a>に幅をつけることで解消します

#kategory a:link, #kategory a:visited{
display: block;
width:178px;
background-color:red;
border:solid 1px;
}

※border分2pxがありますのでそれを引いた178pxとなります

position:absoluteすることでおそらくwidth:180pxが100%となるので親要素の幅が指定されていない状態になりできるのではないかと思います(推測ですが(--;)

試しに↓のようにするとposition:absolute;していても同じ状態になります

<style type="text/css">
#navi{
width:180px;
position:absolute;
}
#kategory a:link, #kategory a:visited{
display: block;
background-color:red;
border:solid 1px;
}

#kategory a:hover{
background-color:green;
}
--></style>

<div id="navi">
<div id="kategory">

<div style="width:100px">
<a href="http://~">テスト1</a>
<a href="http://―">テスト2</a>
</div>

</div>
</div>

投稿日時 - 2007-09-30 15:27:52

お礼

leap_dayさんへ

なるほど! インターネットエクスプローラーのバグだったのですね。
たいへんわかりやすい説明をありがとうございました。スッキリしました。
リンク先のURLも理解しやすかったです。

投稿日時 - 2007-10-01 00:16:13

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問