HTML/CSS入門編｜13章：positionレイアウトの基本を学ぼう

HTML/CSS入門編 13章 positionレイアウトを学ぼう

本章では、フリーレイアウト、ノングリッドレイアウト、ブロークングリッドレイアウトのような自由な配置を実現するためのpositionプロパティの使い方を学びます。

演習素材について
本章では、「13章positionレイアウトを学ぼう」フォルダ内の演習データを使用します。
「13章positionレイアウトを学ぼう」フォルダの中には、「position_fixed-lesson」と「position_absolute-lesson」フォルダが入っています。

「13章positionレイアウトを学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

【13-1】positionレイアウトとは

positionレイアウトとは、CSSのpositionプロパティを使って作成するレイアウトのことです。
カラムレイアウトやグリッドレイアウトのような整列された規則的なレイアウトとは異なり、次のような配置が可能です。

positionレイアウトでできること
1.　特定の要素の位置を固定する。
2.　自由で不規則な配置（フリーレイアウト）。
3.　要素と要素を重ねて配置する。

このレイアウト手法を取り入れることにより、使い勝手の良いUI や、ダイナミックで一味違ったオリジナリティのあるデザインのWebサイトを作成することができるでしょう。

positionプロパティでできること

1.特定の要素の位置を固定する

positionプロパティを使うと、指定した要素をウィンドウ内に固定配置することができます。
ページをスクロールしてもその要素は動きません。
この技術を使うと、ヘッダーやサイドバー、ナビゲーション、ボタンなどを常時表示させておくことができるため、使い勝手の良いUIを設計することができます。
この配置方法を固定配置といいます。

【図解】ヘッダーをページ上部に固定配置する

2.自由で不規則な配置（フリーレイアウト）

ボックスを垂直方向に積み重ねたり、水平方向に整列させるFlexboxやグリッドレイアウトとは異なり、壁にペタペタとシールを貼っていくような感覚で、要素を自由にランダム配置することができます。
この配置方法を絶対配置といいます。

【図解】フリーレイアウト

3.要素と要素を重ねて配置する

positionレイアウトは自由に要素の位置を決められるだけでなく、グラフィックソフトのレイヤーのように、要素と要素を重ねて表示したり、その重なり順を入れ替えたりといったことができます。
Flexboxやグリッドレイアウトでは実現が難しい自由でダイナミックな配置が可能となるため、一味違ったオリジナリティのあるデザインのWebサイトを作成することが可能です。
このようなレイアウトのことを、ノングリッドレイアウト、ブロークングリッドレイアウトなどと呼びます。
この配置方法も絶対配置といい、2と同じ手法です。

【図解】要素を重ねて配置する

【13-2】固定配置の方法を学ぼう

まずは固定配置の方法から解説します。
ここからの演習では、「position_fixed-lesson」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

index.htmlには必要なHTMLタグが記述されています。
reset.cssとstyle.cssが関連付けられています。
- ベースとなるページのスタイリングはすでに完了しています。
- ヘッダーと「ご予約」ボタンを固定配置する演習を行います。

■ start/index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB Bakery</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <h1>WEB Bakery</h1>
    </header>

    <p>
        <a href="#" class="btn">ご予約</a>
    </p>

    <div class="mainvisual">
        <img src="images/mainvisual.jpg" class="mainvisual-img" alt="メインビジュアル">
    </div>

    <main class="main-contents">
        <h2>メインコンテンツ</h2>
    </main>

    <footer class="footer">
        <p class="footer__copyright">&copy; WEB Bakery All Rights Reserved.</p>
    </footer>
</body>

</html>

HTML/CSS入門編サンプルコード13-1

■ style.css

@charset "UTF-8";

body {
    background-color: #551700;
}

header {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    font-size: 36px;
    font-weight: bold;
    font-family: sans-serif;
    color: #551700;
}

h2 {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
    color: #551700;
    padding-top: 50px;
}

.btn {
    background-color: #dd0000;
    color: #ffffff;
    width: 100px;
    height: 100px;
    font-size: 22px;
    font-family: serif;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn:hover {
    background-color: #ff0000;
}

.mainvisual-img {
    width: 100%;
    height: auto;
}

.main-contents {
    width: 80%;
    height: 500px;
    margin: 40px auto 40px;
    background-color: #ffffff;
}

.footer {
    width: 100%;
    height: 150px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML/CSS入門編サンプルコード13-2

■ HTMLの構造図（WEB Bakery）

演習ファイルのブラウザプレビュー

完成イメージを確認しよう

ヘッダーと「ご予約」ボタンを固定配置します。
完成イメージを図解と画面収録で確認しましょう。

【図解】ヘッダーと「ご予約」ボタンを固定配置する　完成

ヘッダーはページ上部（上から0、左から0の位置）に固定配置します。
「ご予約」ボタンは、上から140px、右から40pxの位置に固定配置します。

【画面収録】ヘッダーと「ご予約」ボタンを固定配置する　完成

HTML/CSS 13-1

ヘッダーと「ご予約」ボタンをページ上部に固定配置しよう

1. 配置したい要素にposition:fixed;を指定する

ヘッダーをページ上部に固定配置するCSS（positionプロパティ）を記述します。
positionプロパティの値として、右の5種類が用意されており、用途に応じて使い分けます。
positionレイアウトによる固定配置は以下のコードで指定します。

■ 固定配置の指定方法

position: fixed;

固定配置の指定方法

position: fixed;を指定した要素は、ページをスクロールしても常に同じ位置に固定されます。

■ positionプロパティの値

positionプロパティの値	説明
static（デフォルト）	配置に影響なし。左から右、上から下の通常のHTMLの流れで配置される。
relative	元の位置を基準に位置指定をする。また、position:absolute;を指定する要素の基準ボックスとして機能する。
absolute	position: relative;が指定された基準ボックスを基点として位置指定をする。
fixed	ブラウザ画面を基点として固定配置される。
sticky	スクロールすると特定の位置で固定される。

また、positionプロパティと組み合わせて、要素の位置を調整するためのプロパティとして、右の4種類のプロパティが用意されています。
これらのプロパティは、positionプロパティの値によって配置方法が変わります。
- fixedの場合は、ブラウザ画面の4隅（上端・下端・左端・右端）を起点とした位置指定となります。

■ 要素の位置を指定するプロパティ

プロパティ	説明
top	要素の上端を基準に位置を指定する。
bottom	要素の下端を基準に位置を指定する。
left	要素の左端を基準に位置を指定する。
right	要素の右端を基準に位置を指定する。

■ ヘッダーをページ上部に固定配置する

ヘッダー（header要素）をページ上部に固定配置する場合は、position : fixed ;を指定した上で、top : 0 ;（ブラウザ上端に接する位置指定）とleft : 0 ;（ブラウザ左端に接する位置指定）を指定します。

■ index.html

<body>
    <header>
        <h1>WEB Bakery</h1>
    </header>

    <p>
        <a href="#" class="btn">ご予約</a>
    </p>
    
    <div class="mainvisual">
        <img src="images/mainvisual.jpg" class="mainvisual-img" alt="メインビジュアル">
    </div>
    <!--以下省略-->

HTML/CSS入門編サンプルコード13-3

■ style.css

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML/CSS入門編サンプルコード13-4

【画面収録】ヘッダーをページ上部に固定配置する

HTML/CSS 13-2

■ 「ご予約」ボタンを固定配置する

「ご予約」ボタン（a要素）はページ上端から140pxの位置、右端から40pxの位置に固定配置します。
したがって、position: fixed;を指定した上で、top: 140px; とright: 40px; を指定します。

■ style.css

.btn {
    position: fixed;
    top: 140px;
    right: 40px;
    background-color: #dd0000;
    color: #ffffff;
    width: 100px;
    height: 100px;
    font-size: 22px;
    font-family: serif;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML/CSS入門編サンプルコード13-5

【画面収録】「ご予約」ボタンを固定配置する

HTML/CSS 13-3

2.後続のコンテンツをヘッダーの高さ分marginで押し下げる

ここで大切な点は、ある要素に position : fixed; が指定されると、元々その要素が占めていた領域が消え、後続の要素が押し上げられて、その領域を占める ということです。
position : fixed; が指定された要素は、他のHTML要素との関係が切り離され「浮き上がった」状態になります。※ 図解「position:fixed;の概念図」 参照
今回の場合、ヘッダー（header要素）と「ご予約」ボタン（a要素）に position : fixed; が指定されたため、後続のメインビジュアル（div要素）以降のコンテンツが、元々ヘッダーと「ご予約」ボタンがあった領域に押し上げられ、メインビジュアルの一部がヘッダーの後ろに隠れて見えなくなります。
「ご予約」ボタン（a要素）を含んでいたp要素は、a要素（高さ：100px）の領域がなくなるため、高さを持たなくなります。

■ ブラウザプレビュー

【図解】position:fixed;の概念図

ヘッダーの高さ（100px）分だけ隠れて見えなくなってしまったメインビジュアルを、画像全体が見えている状態に戻すために、メインビジュアルのdiv要素に対してmargin-top:100px;を指定します。
これにより、メインビジュアル以降のコンテンツが全体的に100px下に押し下げられ、正常な見た目を保つようになります。
これで完成です。

【画面収録】margin-top:100px;を指定する

HTML/CSS 13-4

■ ブラウザプレビュー

【13-3】絶対配置の方法を学ぼう

次に、絶対配置の方法を解説します。
ここからの演習では、「position_absolute-lesson」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

index.htmlには必要なHTMLタグが記述されています。
reset.cssとstyle.cssが関連付けられています。
- ヘッダー（header要素）とメニュー（a要素）、フッター（footer要素）、サイトタイトル（h1要素）のスタイリングと画像（img要素）のサイズがすでに設定されています。
この演習で行うことは、3枚の画像（img要素）とh1要素の配置をCSSで設定することです。

■ start/index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>We Love BBQ</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Road+Rage&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
</head>

<body>
    <header class="header">
        <a href="#" class="menu">
            <span class="menu__line menu__line--top"></span>
            <span class="menu__line menu__line--center"></span>
            <span class="menu__line menu__line--bottom"></span>
        </a>
    </header>
    <main class="main-contents">
        <h1 class="page-title">We Love BBQ</h1>
        <div>
            <img src="images/mainvisual.jpg" alt="" class="mainvisual-img">
        </div>
        <div>
            <img src="images/photo1.jpg" alt="" class="photo1-img">
        </div>
        <div>
            <img src="images/photo2.jpg" alt="" class="photo2-img">
        </div>
    </main>
    <footer class="footer">
        <p class="footer__copyright">&copy; We Love BBQ All Rights Reserved.</p>
    </footer>
</body>

</html>

HTML/CSS入門編サンプルコード13-6

■ style.css

@charset "UTF-8";

.header {
    width: 100%;
    height: 140px;
}

.menu {
    background-color: #292929;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 30px;
    right: 40px;
    z-index: 5;
}

.menu__line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #ffffff;
}

.menu__line--top {
    margin-bottom: 5px;
}

.menu__line--bottom {
    margin-top: 5px;
}

.page-title {
    color: #BB0000;
    font-family: "Road Rage", sans-serif;
    font-size: 200px;
    font-weight: 400;
    font-style: normal;
}

.mainvisual-img {
    width: 620px;
    height: auto;
}

.photo1-img {
    width: 358px;
    height: auto;
}

.photo2-img {
    width: 240px;
    height: auto;
}

.footer {
    height: 258px;
    background-color: #292929;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__copyright {
    font-size: 16px;
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 1px;
}

HTML/CSS入門編サンプルコード13-7

■ HTMLの構造図（We Love BBQ）

演習ファイルのブラウザプレビュー

完成イメージを確認しよう

h1と画像を絶対配置します。
完成イメージを図解と画面収録で確認しましょう。

【図解】h1と画像を絶対配置する　完成

h1要素と3つのimg要素は、親要素であるmain要素の4隅（上端・下端・左端・右端）を起点として位置指定を行います。

【画面収録】h1と画像を絶対配置する　完成

HTML/CSS 13-5

h1要素とimg要素をpositionプロパティで絶対配置しよう

positionプロパティでh1要素と3つのimg要素を配置します。
要素を画面内の好きな位置に自由に配置するフリーレイアウトを実現する手法を絶対配置といいます。
絶対配置する要素には、以下のCSSを指定します。

絶対配置の指定方法

position: absolute;

絶対配置の指定方法

要素を絶対配置するときのポイントは、配置する要素にposition: absolute;を指定するだけでなく、絶対配置の基点となるボックスを指定するということです。
絶対配置の基点となるボックスのことを基準ボックスと呼びます。
基準ボックスは、配置する要素の親要素、または先祖要素（親の親など）を選びます。
基準ボックスとなる要素には、以下のCSSを指定します。

■ 基準ボックスを指定する

position: relative;

基準ボックスを指定する

position: relative;で基準ボックスを指定しないと、position: absolute;で絶対配置される要素は、ブラウザ画面の4隅を基点として配置されます。

絶対配置の手順
1.　position: relative;で基準ボックスを指定する。
2.　配置する要素にposition: absolute;を指定する。
3.　top、bottom、left、rightプロパティで基準ボックスを基点とした位置を指定する。
4.　必要に応じて、各要素の重なり順を指定する

絶対配置のポイント！
必ず基準ボックスを指定すること！
※基準ボックスを指定しないと、ブラウザの4隅を基点として要素が配置されるので、ブラウザ幅を変えたときにレイアウトが大きく崩れることがあります。

1. position: relative;で基準ボックスを指定する

絶対配置する要素の親要素、または先祖要素（親の親など）を基準ボックスとして指定します。
今回は親要素のmain要素を基準ボックスとして指定しますので、まずはmain要素のスタイル指定から行います。
- 幅（width）を1240pxとして、marginで中央配置します。
- ダミー背景色も入れておきます。
- main要素にposition: relative;を指定し、絶対配置のための基準ボックス化します。

■ index.html

<main class="main-contents">
  <h1 class="page-title">We Love BBQ</h1>
  <div>
    <img src="images/mainvisual.jpg" alt="" class="mainvisual-img">
  </div>
  <div>
    <img src="images/photo1.jpg" alt="" class="photo1-img">
  </div>
  <div>
    <img src="images/photo2.jpg" alt="" class="photo2-img">
  </div>
</main>

HTML/CSS入門編サンプルコード13-8

■ style.css

.main-contents {
    width: 1240px;
    margin: 0 auto;
    background-color: #ffe4c4;
    position: relative;
}

HTML/CSS入門編サンプルコード13-9

■ ブラウザプレビュー

2.配置する要素にposition: absolute;を指定する

基準ボックスの指定が完了したら、続いて配置する各要素にposition:absolute;を指定します。
position:fixed;を指定したときと同様に、ある要素にposition:absolute;が指定されると、元々その要素が占めていた領域が消え、後続の要素が押し上げられて、その領域を占めるという現象が起こります。
position: absolute;が指定された要素は、他のHTML要素との関係が切り離され「浮き上がった」状態になります。
h1要素と3つのimg要素にposition:absolute;を指定すると、これらの要素を内側に含んでいた親要素のmain要素の中身が空になります。
その結果、高さ（height）を指定していないmain要素は、height:0;の状態になり、消えてしまったように見えます。 ※右のブラウザプレビュー参照
そこで、main要素にheightを指定することにより、このレイアウトの崩れに対処します。

.page-title {
    color: #BB0000;
    font-family: "Road Rage", sans-serif;
    font-size: 200px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
}

.mainvisual-img {
    width: 620px;
    height: auto;
    position: absolute;
}

.photo1-img {
    width: 358px;
    height: auto;
    position: absolute;
}

.photo2-img {
    width: 240px;
    height: auto;
    position: absolute;
}

HTML/CSS入門編サンプルコード13-10

■ ブラウザプレビュー

position:absolute;を指定した要素は重なって表示される

position:absolute;を指定した要素は、浮き上がった状態になると同時にグラフィックソフトのレイヤーのような重なり順が生まれます。
top、bottom、left、rightなどのプロパティによる位置指定を行っていない場合は、上記ブラウザプレビューのように、基準ボックスの上端0・左端0の位置に重なって配置されます。
このときの重なり順は、HTMLのソースコード中で下に記述されている要素から順番に、ブラウザウィンドウでは上に表示されます。
この重なり順は、後述するz-indexプロパティにより自由に入れ替えることが可能です。

■ 基準ボックス（main要素）に高さを指定する

.main-contents {
    width: 1240px;
    height: 925px;
    margin: 0 auto;
    background-color: #ffe4c4;
    position: relative;
}

HTML/CSS入門編サンプルコード13-11

サイズ可変の絶対配置

今回作成するページは固定幅のシングルカラム内に複数要素をランダム配置するタイプのレイアウトですので、カラム（基準ボックス）に高さ（height）を指定することにより、簡単にレイアウト崩れへの対処が可能です。
しかし、ブラウザ幅に応じてカラム幅と配置する要素のサイズが可変するタイプのレイアウトを絶対配置で作成する場合には注意が必要です。
- その場合、基準ボックスにheightを指定すると、ブラウザ幅によってはレイアウトが大きく崩れる可能性があります（要素がはみ出したり、反対に大きな余白ができてしまったり）。
サイズ可変の絶対配置の問題点と対処方法については、次章で詳しく解説します。

■ ブラウザプレビュー

3.基準ボックスを基点とした位置を指定する

右の図解を見ながら、各要素の位置指定を行いましょう。
position:absolute;を指定した要素には、基準ボックスを起点とした縦方向の位置と横方向の位置を指定します。
位置指定のプロパティは以下のとおりです。

■ 要素の位置を指定するプロパティ（再掲）

プロパティ	説明
top	要素の上端を基準に位置を指定する。
bottom	要素の下端を基準に位置を指定する。
left	要素の左端を基準に位置を指定する。
right	要素の右端を基準に位置を指定する。

■ style.css

.page-title {
    color: #BB0000;
    font-family: "Road Rage", sans-serif;
    font-size: 200px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 487px;
    left: 49px;
}

.mainvisual-img {
    width: 620px;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
}

.photo1-img {
    width: 358px;
    height: auto;
    position: absolute;
    top: 64px;
    left: 0;
}

.photo2-img {
    width: 240px;
    height: auto;
    position: absolute;
    top: 243px;
    left: 278px;
}

HTML/CSS入門編サンプルコード13-12

【図解】h1と画像を絶対配置する　完成（再掲）

■ ブラウザプレビュー

4.各要素の重なり順を指定する（z-indexプロパティ）

先述したように、position:absolute;（fixedも含む）を指定した要素の重なり順は、HTMLのソースコードの下に記述されているものから順番に、ブラウザウィンドウでは上に重なって表示されます。
したがって、このページで絶対配置（固定配置）されている要素は、ブラウザ表示上、次の順番で手前から重なっていることになります。

a要素（.menu）
h1要素（.page-title）
img要素（.mainvisual-img）
img要素（.photo1-img）
img要素（.photo2-img）

index.html

<header class="header">
  <a href="#" class="menu">
    <span class="menu__line menu__line--top"></span>
    <span class="menu__line menu__line--center"></span>
    <span class="menu__line menu__line--bottom"></span>
  </a>
</header>
<main class="main-contents">
  <h1 class="page-title">We Love BBQ</h1>
  <div>
    <img src="images/mainvisual.jpg" alt="" class="mainvisual-img">
  </div>
  <div>
    <img src="images/photo1.jpg" alt="" class="photo1-img">
  </div>
  <div>
    <img src="images/photo2.jpg" alt="" class="photo2-img">
  </div>
</main>

HTML/CSS入門編サンプルコード13-13

【図解】各要素の重なり順（初期状態）

■ z-indexプロパティ

positionプロパティでstatic以外の値を指定した要素の重なり順は、z-indexプロパティで制御することができます。

記述法は以下のとおりです。

z-index: 整数値;

z-indexプロパティ

z-indexプロパティの使い方

z-indexプロパティの値には整数値を指定します。
指定した数値が大きいほど前面に出てきます。
-1などの負の値を指定することもできます。
z-indexが指定されていない要素には、初期値のautoが設定されています。

以上を踏まえて、各要素に適切なz-indexの数値を指定したCSSが次のコードです。
※main要素（.main-contents）に指定していたダミー背景色は、もう削除してあります。

.menu {
    background-color: #292929;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 30px;
    right: 40px;
    z-index: 5;
}

/*** 中略 ***/

.main-contents {
    width: 1240px;
    height: 925px;
    margin: 0 auto;
    position: relative;
}

.page-title {
    color: #BB0000;
    font-family: "Road Rage", sans-serif;
    font-size: 200px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 487px;
    left: 49px;
    z-index: 4;
}

.mainvisual-img {
    width: 620px;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

.photo1-img {
    width: 358px;
    height: auto;
    position: absolute;
    top: 64px;
    left: 0;
    z-index: 1;
}

.photo2-img {
    width: 240px;
    height: auto;
    position: absolute;
    top: 243px;
    left: 278px;
    z-index: 2;
}

HTML/CSS入門編サンプルコード13-14

【図解】各要素の重なり順（変更後）

【画面収録】各要素の重なり順を指定する（z-indexプロパティ）

HTML/CSS 13-6

■ ブラウザプレビュー（完成）

絶対配置（position:absolute;）の注意点

絶対配置によるレイアウトは、先述したように、壁にペタペタとシールを貼っていくような感覚で要素を配置できてしまうので、一見簡単便利な方法に見えてしまいます。
通常、FlexboxやGridで作成するような、ボックスを縦・横に整列させるレイアウトも、技術的には絶対配置で作成することが可能ではあります。
しかし、修正・更新作業などでコンテンツ（テキストや画像など）が増減した場合に、絶対配置のレイアウトでは、親要素のボックスが自動的に伸縮してくれることは、基本的にありません。
したがって、長期的なメンテナンス性を考慮した場合、絶対配置によるレイアウトはできる限り避けるべきでしょう。
あくまでも、レイアウトはボックスを整列させるFlexboxやGridで作成することを基本としてください。
positionプロパティを使ってレイアウトを行うのは、positionでしか実現できないレイアウトを作成するときのみにしましょう。

※「【13-1】positionレイアウトとは」参照

これで「HTML/CSS入門編 13章 positionレイアウトを学ぼう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む