上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 positionの概要が分かったところで、わかりにくい「relative」(相対位置)と「absolute」(絶対位置)の違いについての考察です。


親ボックスを指定していない場合


 まずは何も準備せずに、いきなりdivボックスに「relative」と「absolute」を指定したときに起きる挙動です。ブログ記事中でいきなり以下のブロックを書き加えてみます。

<div style="position : relative ; left : 20px ; top : 20px ;">ポジションテスト</div>


「relative」
 
ポジションテストrelative:親なし


「absolute」
 
ポジションテストabsolute:親なし




 relativeの方は、「直前の要素」から…つまり、最後のテキストの一文の直下から「左から20pxの場所」「上から20pxの場所」に表示されました。

 absoluteの方は、どこかに消えています。…上にスクロールしてみてください。タイトルバナーを隠す感じでヘンな場所にありませんか?
 また、ブラウザのウィンドウを広げたり狭めたりしてみてください。面白い挙動をすると思います。

 つまり、親要素を指定していない場合の「relative」は、直前の要素からの位置「absolute」はブラウザウィンドウからの位置…に配置されるというわけです。

 恐らく「absolute」が「絶対」を表す言葉で「relative」が「相対」を表す言葉なのでそのような日本語訳になったと思うのですが、「relative」の方は「親戚・縁者・縁続き・継承」の方が分かりやすい訳し方なのではないかと思います。相対と言われると、偏差値を連想してしまいますよね…?…私だけ?




親要素を作っている場合


 今度は「親要素」と言うものを明確に作っている場合の挙動を見てみます。
 親ボックスというのは「position:static;(初期値)」以外のスタイルを当てているボックスです。

「relative」
 
親ボックス(relative)
ポジションテストrelative:親あり


「absolute」
 
親ボックス(relative)
ポジションテストabsolute:親あり



HTML

<div style="position : relative ;">(親ボックス)
 <div style="position : absolute ; top : 20px ; left : 20px ;">
 子供ボックス
 </div>
</div>(親ボックス・ここまで)
*親ボックスの「relative」は「absolute」でも大丈夫。

 このように親ボックスがあると理解しやすくなります。
「relative」は、親ボックス内のテキストの位置を「継承」して、そこから上から20px、左から20pxの場所に配置されています。
「absolute」は、親ボックスの左上からの「絶対位置」…つまり、親ボックス内に何があろうと関係なく、強引に上から20px、左から20pxの場所に配置されます。


Fixed


 もう一つの要素「fixed」、これが結構色んなホームページやブログで見かけることがあるスタイルです。
 邪魔に思われている方もいらっしゃるのではないかと思うのですが、当ページ左下の方に配置されている赤いボックスがそうです。
 スクロールしてもスクロールしても、しつこくつきまとうボックス、これが「fixed」です。


 
ポジションテストfixed
HTML

<div style="position : fixed ; bottom : 20px ; left : 20px ;">
Fixed
</div>


「Fixed」は「absolute」の変化型で、絶対位置配置で、スクロールしても固定される特殊なスタイルです。
 親要素があろうと無かろうと、ブラウザウィンドウの枠を基準とした配置となります。
「absolute」より、さらに強引なヤツです。
*ちなみに、未だシェアの多い、一部の古いブラウザには「fixed」は対応していないので、使用には注意が必要です。

「fixed」は使い方を誤ると、うざくて仕方ない存在なのですが、例えば訪問者のページ移動が多いサイトなどで、ヘッダーナビゲーションを常に固定表示させてユーザビリティを向上したい場合などには有効です。
 フレームを使った古い素材サイトなどと似たようなページ構成(サイドバー固定サイトなど)にすることも可能なので、使い方次第だと思います。

 また「fixed」は、どこに記述しても同じ場所に表示されるので、HTMLトップに置きたいんだけど、HTMLを汚したくない重要ではない要素を、HTML下部に記述して、ブログ内で目立たせることも出来ます。

 激しくお勧めしない、嫌われる方法であれば、広告などを常にページに表示させることも可能です。



■次のページはこちら。
「z-index」について

■メニューに戻るにはこちらから。
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Fri.08.06.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。