Positionの絶対位置と相対位置を解説する【HTML/CSS】

こんにちは。今回はあまり深く考えたことがなかったCSSのpositionについてわかりやすく解説できたらと思います。

絶対位置と相対位置

• absolute：絶対位置
• relative：相対位置

これネットでよく見るんですが日本語ですらあまり意味がわかりません。

簡単に説明すると

absolute

初期値での親がサイトそのもの、になっていて

//no parent
div{
  top:0;
  right:0;
}

と言った感じに書くとブラウザ（一応ブラウザというよりもサイトそのもの）の左上を０として要素が他の要素を受け付けないで配置されるのでブラウザの左上に配置されます。（ブラウザを基準として位置を決めるのはfixedと言うプロパティになります）例えば、A要素B要素どちらも縦横100pxとするとA要素はB要素を押して縦に２つ並ぶことになります。しかしB要素がabsoluteを持ってる場合周りの要素の影響を受けないのでそのままA要素に重なる状態になります。

relative

元ある位置を０として移動します。

//sample.html
<div class="box1"></div>
<div class="box2"></div>

sample.css
.box1{
  width:100px;
  height:100px;
  background:red;
}
.box2{
  width:100px;
  height:100px;
}

この状態だとbox2はbox1によって100px下に押されます。そしてrelativeがない状態だとbox同士はくっつきますが

sample.css
.box1{
  width:100px;
  height:100px;
  background:red;
}
.box2{
  width:100px;
  height:100px;
  position:relative;
  top:10px;
}

relativeとtop:10pxを追加すると押し出されてる状態から10px下に下がります。

Udemyの動画でWEB制作を学ぶ

親要素もpositionで子要素もpositionの時

こちらではbox1が親要素でその中に子要素としてbox2が入ってる状態です。

//sample.html
<div class="box1">
  <div class="box2">   
  </div>
 </div>

.box1{
  width:300px;
  height:300px;
  background:red;
}
.box2{
  width:100px;
  height:100px;
  background:blue;
}

これに対して下のコードを追加すると

.box1{
  width:300px;
  height:300px;
  background:red;
  //ここから追加
  position:absolute;
  top:50px;
  left:50px;
}
.box2{
  width:100px;
  height:100px;
  background:blue;
}

上の画像のように左上を０（起点）としてtop:50px（上から50px）left:50px（左から50px）に移動します。ここまでは通常の先ほど説明したabsoluteと同じです。

.box1{
  width:300px;
  height:300px;
  background:red;
  position:absolute;
  top:50px;
  left:50px;
}
.box2{
  width:100px;
  height:100px;
  background:blue;
  //ここから追加
  position:absolute;
  top:0px;
  left:0px;
}

この際に、box2（子供要素）にposition:absoluteを適応しても子要素はページ自体の左上（０点）には移動しません。

これはbox1が親要素でありpositionを持った要素だからです。

仮にbox1が親要素のままでpositionを持ってない状態にするとbox2は子要素であるにも関わらずページの左上に移動します。わかりやすくするために赤の位置を違う要素でズラしてます。

<div class="box0">
</div>
<div class="box1">
 <div class="box2">   
 </div>
</div>

//box0追加
.box0{
  width:300px;
  height:300px;
  background:green;
}
.box1{
  width:300px;
  height:300px;
  background:red;
}
.box2{
  width:100px;
  height:100px;
  background:blue;
  position:absolute;
}

本来であれば子要素が親要素からはみ出すことはないのですがposition:absoluteを持つとページ自体がdiv2にとっての親要素になるのでdiv2の親要素であるdiv1がどこにあろうが関係なくdiv2は左上を基準として動くようになります。そして他の要素の影響を受けなくなってしまいます。

そこでposition:absoluteを親要素内部格納して置く為にposition:absoluteを持つ親はpositionを持たせて置かないといけません。しかしその親要素も同じくposition:absoluteを持ってしまうと他の要素を受けずに浮遊した状態になってしまいます。（後の要素がposition:abosluteを持つ要素を無視して背後に隠れてしまって見えなくなる。）結果として親要素にposition:relativeを持たせると他の要素から無視されない、さらに子要素をはみ出させないための枠組みになると言った効果があります。

未経験からWEBデザイナーになるための本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

楽天ブックス

¥2,486 （2024/04/14 19:16時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

まとめ

よっぽどのことがない限りはposition:absoluteを単体で使ってページ自体を親要素として使うことはないです。なのでpositon:relativeはposition:absoluteを使う時親要素に使うのは必須だと思ってていいと思います。

それではSee Yaaaaaaaaaa!!!

sgw

フロントエンド

TwitterFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。