ボックスのレイアウト ボックスの配置   no comments

Posted at 4:13 pm in

ボックスを配置するときにはpositionプロパティを使います。
positionプロパティは、absolute、relative、fixed、staticがあり、それぞれ配置のルールが違うので、理解しておくと便利です。
absolute 領域の4隅からの距離
relative 元の位置からの距離
fixed スクロールしても動かない
static 指定しない時と同じ位置

absoluteは画面の左上から??px、画面の上から??px という風に配置されます。

relativeは何も指定しない場合の地点から左から??px、上から??pxという風に指定します。
たとえば、ボックスを先に一個作って、次のボックスを作った場合に、最初のボックスの真下に配置されたとします。(指定無しの状態の場合)
relativeで「top:50px;left:80px」に指定すると、本来の位置から下に50px、右に80pxの位置に表示されます。 (2個目のボックスから見て最初のボックスが上に50px、左に80pxの位置にあるという事)

fixedはabsoluteと同じ様に配置されますが、スクロールしても位置が変わらなくなります。
(一部ブラウザでは対応していない場合があります。)

staticは本来配置される場所に配置されます。

Written by admin on 10月 26th, 2010