position プロパティ

ポジションをマスターできたらCSSのレイアウト配置はかなり自由度が増すので勉強してみた。

floatとの違いはカラム落ちが発生しないというところです。

図解だとこんな感じ

・static

ポジションに何も指定しないとこれ。標準。


・relative（相対的）

ボックスが本来あるべき位置からtop/right/left/bottomで位置を移動し配置される。


・absolute（絶対的）

親ボックスを基点にそこからの位置を指定し移動する。ちなみにstatic（デフォルト）以外のrelative, fixed, absoluteが親ボックスに指定されていることが条件。


・fixed（位置固定）

あるボックスを基点にそこからの位置を指定する。が、position:absolute;との違いは、ブラウザで見た時、スクロールしてもずっと固定で同じ位置を保持し表示されるというとこ。（動かない）

ところがこのfixedはやっぱり面倒なことにIE6ではバグがあって使えない。使うには下記の設定が必要です。

IE6でposition:fixedを実現させるCSS

html, body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
}

div#box {
position: fixed!important;
position: absolute;
}


div#boxがfixedさせたい部分です。あとはtopやleft、bottomやleftを指定することで位置を決める。

ただし、利用するときは以下のような注意点がある。

※IE6でposition:fixedするときの注意

後方置換ではfixedが適応されない（標準準拠でのレンダリング時にのみ対応）
xml宣言などをしているとこのposition:fixedが適応されません。
使用する場合はHTMLの方でも標準準拠であるようにしておきましょう。

positionを使ったらx-indexで重なり順序を指定するといいでしょう。
指定する数字が大きいと上に重なります。