コーディング犬に聞く：「position:absoluteが難しいです」

「要素を好きな場所に配置するためのCSSだよ！」

例えば、

.box{
  position:absolute;
  top:0;
  left:0;
}

とすると、

指定した場所へ移動できます。

「位置の指定だよ！」

例えば、

top:0;

は、

上から0px。

left:0;

は、

左から0px。

です。

つまり、

top:0;
left:0;

なら、

左上に配置されます。

「実はここが罠なんだ。」

初心者が最初にやると、

だいたいこうなります。

.box{
  position:absolute;
}

「あれ？」

「どこ行った？」

「なんか変な場所にある！」

これがabsoluteあるあるです。

「基準が分かってないから！」

absoluteには、

必ず

『どこを基準にするか』

があります。

例えば、

こんなHTML。

<div class="parent">
  <div class="child">
    ボタン
  </div>
</div>

そして、

.child{
  position:absolute;
  top:0;
  right:0;
}

とします。

初心者は、

親要素の右上に行くと思います。

でも実際は違うことがあります。

「親にpositionが無いから！」

例えば、

.parent{
  position:relative;
}

が無いと、

absoluteは画面全体を基準にします。

覚えることは1つ。

.parent{
  position:relative;
}

.child{
  position:absolute;
}

セットで覚える。

これが超重要です。

「absoluteの親になるための目印！」

初心者は、

position:relative;

を見ると、

位置を動かすものだと思いがちです。

でも実務では、

position:absolute;

のために使うことが多いです。

「NEWマーク！」

例えば、

商品名
   NEW

みたいなやつ。

HTML

<div class="card">
  <span class="new">NEW</span>
</div>

CSS

.card{
  position:relative;
}

.new{
  position:absolute;
  top:10px;
  right:10px;
}

これで右上に配置できます。

例えば、

• バナーの装飾
• ボタンのアイコン
• 吹き出し
• ラベル
• モーダルの閉じるボタン

など。

Web制作ではかなり使います。

「通常の流れから外れる！」

例えば、

<div>A</div>
<div>B</div>
<div>C</div>

なら、

A
B
C

です。

でも、

Bをabsoluteにすると、

A

C

みたいになります。

レイアウトの計算から外れるんです。

「その通り！」

absoluteは、

浮いている状態。

なので、

他の要素と重なります。

「めちゃくちゃある！」

例えば、

z-index:10;

なら、

前に出ます。

z-index:1;

なら、

後ろになります。

absoluteとセットでよく使います。

これです。

.child{
  position:absolute;
}

.parent{
  position:relative;
}

を書き忘れる。

これは本当に多いです。

「relativeが家。」

「absoluteが子供。」

子供は家を基準に動く。

だから、

.parent{
  position:relative;
}

.child{
  position:absolute;
}

これで覚えればOK。

「かなり使う！」

ただし、

レイアウト全体を作るためではありません。

今は、

display:flex;

や

display:grid;

が主流です。

absoluteは、

『細かい位置調整』

で使うことが多いです。