CSS:positionプロパティの値「absolute」の開始位置と重なり

positionプロパティを使うときの自分用メモ

▼static

何も指定しない時の値。

▼absolute

絶対配置。結構便利な存在。今回はコレを使うときのメモ

▼relative

相対は位置。ようするに「static」+top/bottom/left/right ができるヤツ。

▼fixed

絶対配置で更にスクロールしても位置がずれない。
時々見かけるが個人的にはウザイと思っているため使わない。(確かIE6未対応だと思う)

absolute の開始位置について

絶対配置ってなんだろう。この値をいきなり指定するとウィンドウ全体の左上に指定した内容が現れます。

CSSのルールを一切無視して「絶対」な値なんです。一瞬びっくりすることでしょう。

でもこの指定が意外と役に立つ。

これの親要素にpositionプロパティのstatic以外の値が指定されるとその親要素のボックスの中の左上が基準位置になるのでそこに現れるのです。

例えば、親要素に relative を設定しておけば、いちいちウィンドウの左上から引っ張り出す必要がなくなります。

absolute の表示順序をz-indexプロパティで整える

ただ、いい気になって親要素に relative を入れまくっていると、ナビゲーションをjQueryなどの動的なものにしたときに、どの部分が上に表示されるかでいろいろとけんかが起こる。

特に、IE6 なんかでは結構シビアに表示されてしまうので、そう言う場合は、z-indexプロパティを使う。

z-indexプロパティは、1とか3とかナンバーのみを値として入力する。

大きい方が上に表示される。

まず、FirefoxのFirebug でCSSの値を弄りながら表示順序を合わせて、次にIE(特に6ですな)で確認。

たぶん、一発じゃうまくいかないので、そのときは表示どおりにならない場所にある absolute を探す。

見つけたら、親要素をたどっていって、relative を探す。

そこに z-indexプロパティを加えて表示どおりにする。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です