【HTML/CSS】relativeとabsoluteを使い方。【初心者向け】
公開日：positionプロパティの使い方
まずは、軽くおさらいしておきましょう。
positionプロパティに指定できるものは、以下の4つがあります。
- static(初期値)
- relative
- absolute
- fixed
簡単に言うと、
staticは、なにもしない初めの状態。
relativeは、自分の本来の位置を基準として位置を決める。
absoluteは、親要素を基準として位置を決める。(親要素にstatic以外を指定する必要あり)
fixedは、ウィンドウを基準として位置を決める。(つまりスクロールしても動かない)
今回は、よく使う、relativeとabsoluteについて解説していきます。
これを読んで、思い通りにならない苦痛から逃れて、Happyになりましょう。
セットで使う、right、left、top、bottomについては、ある程度理解しているものとして進めさせていただきます。
relativeの性質、使いどき。
上で述べたとおり、
relativeは、自分の本来の位置を基準として位置を決めることが出来ます。
例えば、
position: relative;
top: 20px;とすれば、もともとの上端から20px移動した位置、
つまり、下に20px動かすことが出来ます。
「パーツの位置を少しだけ調節して、目立たせたいな」ってときに使えます。
もうひとつ、後に続く要素の動きを覚えておいてください。
これが、absoluteと違うので混乱しないように。
positionをrelativeにして、位置を動かした場合、後に続く要素は、
動かす前の位置にあるものとして、ふるまいます。
つまり、右に動かしたからといって、つられて右に行くことはないし、
下に動かしたからといって、その分だけ下に下がってくれることもありません。
上下に動かす場合は、次の要素との間隔も調節するのが、レイアウトを崩さないためにはGoodです。
absoluteの性質、使い時。
absoluteは、親要素を基準として位置を決めることができます。
基準とする親要素には、positionプロパティにstatic以外の値を指定する必要があるので、
他との兼ね合いがなければ、とりあえず親要素にはrelativeを指定しておきましょう。
基準となる親要素の端からの距離を、right、left、bottom、topで指定することが出来ます。
親要素の左上の角に合わせたい場合は、
position: absolute;
left: 0;
top: 0;としましょう。
absoluteにするともともとの位置は関係なくなります。
親要素内を自由に動き回る要素としてイメージしましょう。
そして、注意点です。
absoluteを指定した場合、
後に続く要素は、absoluteの要素がいないものとしてふるまいます。
relativeの場合は、
元々の位置にいるものとして、振る舞うのに対して、
absoluteの場合は、
元々の位置にもどこにもいないものとして振る舞います。
つまり、無視されます。「おまえの席、ねぇから！」状態です。
これを、理解してないと、意図せず、レイアウトが崩れてしまう原因になります。覚えておいてください。
absoluteの使いどきは、
空間のある位置に配置したり、前後の要素と重ねるような表現をしたい場合です。
美しいコードを書こう
この記事を読んで理解が深めることが出来たでしょうか？
細部まで正しく理解することで、美しいコードを書きましょう。
世の中のコードが美しくなることを願っています。
