positionプロパティの考察

CSSの中でpositionプロパティは他のプロパティより異質です。
ですのでちゃんと意味を理解しないと使い方がまったく解りません。

positionの意味を理解する上で
static（デフォルト）とfixed（固定）は無視しましょう。

staticはデフォルトつまり何も指定してないのと同じ
fixedはブラウザ（IE）でサポートされておらず
使用するのは現実的ではないからです。

一番よく使うのはrelativeです。
相対位置指定、つまり本来表示されるべき場所からどれくらい離れた場所に表示するかを指定できます。
position:relative; top:10px; left:10px;
ですと本来表示される場所より10px下にさらに10px右に表示されます。
marginやpaddingと同じような感じで複雑な配置が可能になります。

次によく使うのはabsoluteです。
絶対位置指定、つまり親要素からのどれくらい離れた場所に表示するかを指定できます。

親要素とは何も指定がない場合はbody（つまりブラウザで表示されている全画面）が親要素になります。
bodyからabsoluteを適用する要素の間にrelativeやfixedを指定している要素がある場合その要素を親要素とします。

関連エントリー

BIR-もうひとつの画像置換
透過PNGの罠の解決法
画面の下部にフッターを表示する
cssでページの右上に広告を表示する。
CSSで垂直中央を実装する【css tips】
javascriptで文字にドロップシャドウをつける方法
CSS Nite in OSAKA　ザ・ルールズ・オブ・スタイルシート by 益子貴寛
CSS Nite in OSAKA
【SEO対策tips】最適化された(x)html-img要素

スポンサードリンク

«cssでページの右上に広告を表示する。 | メイン | SeesaaからMovabletypeへブログデータを移行する方法»