【HTML&CSS】CSS Position プロパティの徹底解説、要素の配置をマスターしよう

2023年10月1日

CSSのposition プロパティは、要素の配置を制御するための重要なツールです。この記事では、static、relative、absolute、fixedの各値について詳しく解説し、ウェブデザインにおける正確な要素の位置決めを学びます。

CSS Position プロパティの詳細解説

CSS Position プロパティの詳細解説

CSSのposition プロパティは、要素をページ上でどのように配置するかを制御するために使用されます。以下は主要な position 値についての詳細な説明です。

`static`（静的）

static は position プロパティのデフォルト値で、通常のHTMLフローレイアウトに従います。要素は文書フローに従って配置され、top、right、bottom、left プロパティは無視されます。静的な要素は通常のスタイルを持ちます。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            /* 静的な位置設定（デフォルト） */
            position: static;
        }
    </style>
</head>
<body>
    <div class="box">Static</div>
</body>
</html>

position: static; はデフォルトの設定で、要素は通常のHTMLフローレイアウトに従います。要素は文書フローに従って配置され、top、right、bottom、left プロパティは無視されます。この例では、青いボックスが通常のフローレイアウトに従って表示されます。

`relative`（相対位置）

relative は要素を通常のHTMLフローレイアウトに従って配置しますが、top、right、bottom、left プロパティを使用して要素を元の位置から相対的に移動できます。他の要素に影響を与えず、微調整が可能です。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            /* 相対的な位置設定 */
            position: relative;
            top: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div class="box">Relative</div>
</body>
</html>

position: relative; は要素を通常のHTMLフローレイアウトに従って配置しますが、top、right、bottom、left プロパティを使用して要素を元の位置から相対的に移動できます。この例では、青いボックスが元の位置から上に20px、左に30px移動して表示されます。

`absolute`（絶対位置）

absolute は要素を親要素に対する相対位置ではなく、最も近い親要素または祖先要素に対する相対位置として配置します。親要素が relative または absolute である必要があり、要素は通常のフローレイアウトから抜け出します。この方法で要素を配置すると、他の要素に影響を与える可能性があります。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 200px;
            height: 200px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            /* 絶対的な位置設定 */
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Absolute</div>
    </div>
</body>
</html>

position: absolute; は要素を親要素に対する相対位置ではなく、最も近い親要素または祖先要素に対する相対位置として配置します。親要素が relative である必要があり、要素は通常のフローレイアウトから抜け出します。この例では、親要素に対して絶対位置に配置され、青いボックスは親要素の中央に表示されます。

`fixed`（固定位置）

fixed は要素をブラウザウィンドウに対する相対位置として配置します。要素はスクロールしても画面上に固定され、ヘッダーやフッターのような要素の作成に適しています。他の要素との干渉を防ぎます。

<!DOCTYPE html>
<html>
<head>
    <style>
        .header {
            width: 100%;
            height: 50px;
            background-color: #333;
            color: white;
            text-align: center;
            /* 固定位置設定 */
            position: fixed;
            top: 0;
            left: 0;
        }
        .content {
            padding-top: 50px;
            /* ヘッダーの高さ分の余白を確保 */
        }
    </style>
</head>
<body>
    <div class="header">Header (Fixed)</div>
    <div class="content">
        <!-- ここにコンテンツを追加 -->
    </div>
</body>
</html>