position absolute/css relative 絶対位置と相対配置の違い プロパティとは/Webレイアウトの作り方/読み方 | デジマースブログ

---

絶対配置 absolute(アブソリュート)
相対配置 relative(レラティブ)
relativeはカタカナ読みで「レラティブ」です。

今回はCSSによるWebレイアウトでは不可欠な、絶対配置と相対配置それぞれの違いの説明です。

目次

---

• 『絶対配置』の場合
• 『相対配置』の場合（1）
• 『相対配置』の場合（2）
• 『絶対配置』複数要素の場合
• 『相対配置』複数要素の場合
• 『画面』ではなく『親要素』を起点にする場合（1）
• 『画面』ではなく『親要素』を起点にする場合（2）
• さいごに

『絶対配置』の場合

---

"画面の左上（基準座標）"から移動

『相対配置』の場合（1）

---

”画面（親要素）の左上（基準座標）”から移動

『相対配置』の場合（2）

---

元々表示されるはずだった位置から移動

『絶対配置』複数要素の場合

---

『要素C』が上に詰まる

『相対配置』複数要素の場合

---

『要素B』が元々表示されるはずだった位置が空く

『画面』ではなく『親要素』を起点にする場合（1）

---

『親要素』に『absolute』を指定してしまうと画面を基準（始点）に3つの兄弟要素が同じ絶対配置にされてしまい重なってしまう…

『画面』ではなく『親要素』を起点にする場合（2）

---

『親要素』に『relative』を指定することで親要素を基準(始点)に配置できる

さいごに

---

絶対配置と相対配置の関係をより理解することで、重なりのレイアウトを適切に活用していけます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。