【CSS】absoluteを完全に理解する

absoluteはブロック要素の位置を決めるCSSプロパティ『position』に対して設定できる値です。本記事ではabsoluteの使い方と使用例を見ていきましょう。

position: absolute; とは？

ブロック要素に対してposition: absolute; を指定すると、画面に対して『絶対(absolute)』の位置になります。

    <p>私は普通です。</p>
    <p>私は普通です。</p>
    <p　class="abs">私が『絶対』です。</p>
    <p>私は普通です。</p>

通常は、HTMLが記述されている順番に上から下へ要素が並びます。

ここで、CSSを追記して３つ目の要素に『position: absolute;』を適応してみます。

.abs {
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

すると、指定された要素だけ画面全体からみて左上に移動していることがわかります。『top』『left』はそれぞれ上から何ピクセルか、左から何ピクセルか、を指定しています。

つまり、『position: absolute;』を指定することで『絶対的(absolute)』な位置を決めることができます。

例えば、画面に対して『上から100px、左から100px』の位置に要素を配置してみましょう。

.abs {
    position: absolute;
    top: 100px;
    left: 100px;
    color: red;
}

すると、以下のようにブラウザの左上から見て100pxの位置に移動します。

position: relative; と組み合わせて使う

以上の説明では、ブラウザの画面に対して要素の位置を決定しました。

ここからさらに進んで、親要素に対して要素の位置を決定する方法を見ていきましょう。それを実現する方法は本当に簡単です。
親要素に対して『position: relative』を指定するだけです。

    <div class="parent">
        <p>私は普通です。</p>
        <p>私は普通です。</p>
        <p class="abs">私が『絶対』です。</p>
        <p>私は普通です。</p>
    </div>

.parent {
    position: relative;
    border: red 1px solid;
    width: 250px;
    height: 250px;
    margin: 50px;

}

.abs {
    position: absolute;
    top: 100px;
    left: 100px;
    color: red;

}

すると、画面に対してではなく、親要素の左上からみてどの位置にあるのか指定することができました。

これは、親要素がどの位置にあっても、その親要素からみて位置を指定することができる、つまり『相対的(relative)』に位置を決めることができます。

『position: absolute;』の使用例

Twitterでバズった『CSS完全に理解した』を実装してみましょう。

<div class="parent">
    <p>CSS<br>完全に理解した</p>
</div>

.parent {
  position: relative;
  border: 1px black solid;
  width: 150px;
  height: 80px;
}

.parent p {
  position: absolute;
  top: 0;
  left: 50px;
  width: 120px;
}