Embedded Files
絶対位置はわかったかな？
次は、相対位置「relative」を解説しま～す。
relative：相対位置とは。
relative：相対位置とは。
本来自分が配置される位置を基点として表示位置を指定して配置する方法。
下に続く要素は「本来配置されていた場所」に続くように配置される。
そのため本来の位置を考慮しながら使う必要があります。。
floatとの併用は可能。
マージンやパディング、floatなどのプロパティが加わったり、 ブラウザーによるバグが作用したりと、
不具合が出た時修正し難いので、 簡潔な使い方にとどめておくほうが良いです。
相対位置の図説↓（絶対位置との違い）
左のソースに対して
青ボックスには、top50px, left50pxで相対位置を
緑ボックスには、bottom30px,right150pxで相対位置を
赤ボックスにはposition指定無し を指定すると。。。
左図のように表示されます。
点線枠の青いボックス、緑のボックスはそれぞれが
本来位置するべき場所。その場所を基準に、
（基点は●黒丸）
青ボックスはtop50px, left50px分移動して、
緑ボックスは、bottom30px,right150px分移動して
表示されています。
そして、重要な違いは
赤いボックスが、ちゃんと青と緑のボックスの下、
ソース通りの位置に配置され表示されている点。
絶対配置だと、青と緑のボックスの次っていう
順番を無視して、白いボックスの中の一番上部に
表示されちゃってましたよね。
ちなみに指定する数値は、マイナス（－）も使えます。
top：－50pxだと、50ピクセル分上に移動するんですな。
<body>
<div 白いボックス>
<div 青いボックス></div>
<div 緑のボックス></div>
<div 赤いボックス></div>
</div>
</body>
positionを設定してなければ、
この順番通り、
青いボックス
緑のボックス
赤いボックス
と表示される。
=メモ=
relativeの使いドコロって？
「position: absoluteと組み合わせる」
position１の項でチラッと出てきたように、
absoluteを指定する時、親要素にrelativeをあてましたよね。
絶対配置の基準を定めるposition: relative
「z-indexプロパティの指定と組み合わせる」
z-indexについては、次章で解説します。
z-indexを適用するためのposition: relative
上記2点といったところでしょうか～。
Page updated
Google Sites
Report abuse