CSSのpositionでrelativeとabsoluteの使い方

CSSのpositionプロパティとpositionの値に指定ができるrelativeとabsoluteを使用すると、ボックスの表示位置をコントロールすることができるようになります。

positionでrelativeとabsoluteの使い方は使い慣れないと少し難しさを感じることがありました。

使い方のコツを掴めば、そうでもないのですが使い方のポイントとしては、どの要素を表示位置の基点にするかです。

1. CSSのpositionの使い方
2. positionでrelativeの使い方
- 2.1. relativeを元の位置を基点に指定
- 2.2. relativeの位置調整
3. positionでabsoluteの使い方
4. まとめ

CSSのpositionの使い方

CSSのpositionプロパティは、ボックスの表示位置を指定するときに使います。

HTMLの要素が形成するボックスの表示位置を決めるために要素をセレクタにしてpositionプロパティを指定します。

positionにはいくつかの指定できる値があり、何も値を指定しないと初期値のstaticが適用されます。このstaticの値は位置調整してもCSSが効きません。

ですが初期値を変更してボックスの位置を相対位置か絶対位置かを指定することができます。このときの指定できる値に「relative」と「absolute」があります。

positionでrelativeの使い方

position: relativeは元の表示位置から相対的に要素の位置を動かしたいときに指定する使い方ができます。

相対的な位置とは「本来あるべき場所を基準とした位置」を意味します。

これを踏まえてpositionで指定するrelativeの使い方は、position指定した要素を本来あるべき場所を基点とし表示位置をコントロールする使い方ができます。

relativeを元の位置を基点に指定

実際に元要素にCSSでrelativeを使ってボックスの表示位置を指定してみます。

<div>
    <h2>ボックス位置</h2>
</div>

positionを指定するHTML要素はdiv要素を親として、h2を子要素にしてます。

div {
    width: 400px;
    margin: auto;
    padding: 10px;
    background: #2ac5b3;
}
h2 {
    background-color: greenyellow;
    margin: 0;
    padding: 5px;
    position: relative;
}

CSSはサンプルのh2が元の位置が表示位置の基点になるように「relative」を指定します。これでサンプルのh2の表示位置を調整できるようになります。

でもまだ実際の表示位置は指定していないので表示位置を調整するCSSを指定すると位置を移動できます。以下の説明で位置調整をしていきます。

relativeの位置調整

positionのrelativeを要素(サンプルはh2)に指定したら、ボックスの基点から上下左右に位置調整をするCSSを使います。

まずは画像を見てください。

上記の画像はコードサンプルに使用しているh2要素、つまりrelativeを指定してる要素を基点にして位置をずらしています。この場合の指定するCSSの使い方は以下のようにCSSを書きます。

div {
    width: 400px;
    margin: auto;
    padding: 10px;
    background: #2ac5b3;
}
h2 {
    background-color: greenyellow;
    margin: 0;
    padding: 5px;
    position: relative;
    top: 25px;
    left: 40px;
}

表示位置の調整に関係してるCSSは「top」と「left」です。CSSで基点の要素(サンプルならh2)の上からtopで25pxずらす、横はleftで40pxずれて移動してます。

このときに表示位置を右からなら「right」下からなら「bottom」も使えます。

ここまでのposition: relativeの使い方を一旦まとめます。

表示位置を調整したい要素にposition: relativeを指定する
具体的な位置調整は「top」「left」「right」「bottom」を組み合わせて配置する

という使い方です。この使い方を基本として覚えておきながら、表示位置の指定で親要素が含まれる場合の使い方「position: absoluteも使う場合」はどのような使い方をするのかを以下から説明します。

positionでabsoluteの使い方

CSSのposition指定で使う値のabsoluteは親要素を基点にボックスの表示位置を絶対位置で調節することができます。ただし基点にする親要素にはpositionを指定して使うようにします。

表示位置を指定するのに親要素を使ったり、rerativeとabsoluteを組み合わせたりと少しややこしくなるのもここからですが、ようは表示位置を調整したい要素をどこの基準に合わせて調整するかというだけのことなのです。

それがpositionのrelativeとabsoluteに関しては、元要素を基準にするか親要素を基準に位置調整するかの違いだけの使い方が変わるというだけのことなんです。

親要素にrelativeを使う

ここまでは元の要素を基点にボックスの位置を移動させましたが、positionにabsoluteも指定する場合にはpositionのrelative指定を親要素を基点にするために使います。

HTMLとCSSのサンプルから見てください。

<div class="box">
    <h2 class="x">ボックス位置</h2>
    <p>うちの猫のびびおくんがPCのキーボードの上に乗ってくるから部屋に戻ると謎の暗号が入力されてる。もちろん解読不可能</p>
</div>

HTMLはここまでの説明と同じくdivが親要素でh2が子要素のボックスです。p要素も含めてみました。

.box {
    width: 400px;
    margin: auto;
    padding-top: 25px;
    position: relative;
    background: #22c4b7;
}
.x {
    background-color: #dfff1c;
    margin: 0;
    padding: 5px;
    position: absolute;
}

CSSはHTMLで書いた親要素divにposition: relativeを指定します。これで親要素のdivはh2のボックスの位置指定をするための基点にすることができます。

親要素を基点にする場合のpositionの使い方では「表示位置を調整したい要素の親要素にrelativeを指定」します。

そして実際に位置指定する要素(サンプルならh2)、つまり子要素にはabsoluteを指定します。

親要素　position: relative
子要素　position: absolute

「セットで組み合わせた使い方をする」と覚えておくいいかと思います。

子要素をabsoluteにする

.box {
    max-width: 400px;
    margin: auto;
    padding-top: 25px;
    position: relative;
    background: #22c4b7;
}
.x {
    background-color: #dfff1c;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
}

親要素にrelativeを指定したら子要素のh2にはCSSでposition: absoluteを指定します。absoluteは絶対位置で指定ができます。

絶対位置の場合は、間に他の要素があっても指定する位置が絶対の表示位置になります。

例えば親要素の中に3つの要素があるとして一番下の要素をabsolute指定して表示位置をtop:0;とleft:0;で指定した場合などには、その間の要素を飛び越えて親要素の左上の表示位置をします。

少し難しいですが使えるようになるとデザインするテクニックの幅が広がります。

最後は子要素のh2にposition: absoluteを指定したボックスの表示位置を調節して終わりたいと思います。