CSS position(位置)の配置について (5 つの異なる配置方法を紹介)

CSS のposition 属性は、ページ上の要素の位置を設定するために使用されます。これにより、適切と思われる任意の位置に任意の属性を配置できます。 position 属性には、次のように、5 つの異なる配置方法に対応する 5 つのオプション値があります。

価値	説明する
static	デフォルト値の静的配置は、配置を行わず、要素を通常の位置で表示することを意味し、このとき上下左右の配置属性は適用されません。
relative	相対位置、つまり要素の通常の位置を基準とした位置。top、right、bottom、left 属性を使用して、通常の位置を基準とした要素のオフセットを設定できます。この設定は、要素内の他の要素には影響しません。プロセスを
absolute	絶対配置、最初の非静的配置親要素を基準とした相対配置では、top、right、bottom、left の 4 つの属性を使用して、親要素の位置を基準とした要素のオフセットを設定できます。条件を満たす親要素がない場合は、ブラウザーウィンドウに対して相対的に配置されます。絶対配置された要素は、他の要素に影響を与えません。
fixed	固定位置、つまりブラウザの作成に相対的な位置。上、右、下、左の 4 つの属性を使用して、ブラウザウィンドウに対する要素の位置を定義できます。固定配置を使用する要素要素の位置は、ブラウザーウィンドウがどのようにスクロールされても固定されます。
sticky	相対位置と固定位置を組み合わせたスティッキー位置は、吸着効果に似た実線を持つことができます。ページをスクロールするとき、その効果は相対位置と同じであり、画面外にスクロールすると、自動的に固定になります。。

コンテンツ 非表示

1. 1.静的ポジショニング：static

2. 2.相対位置：relative

3. 3.絶対位置決め：absolute

4. 4.固定位置：fixed

5. 「 CSS position」についてわかりやすく解説！絶対に観るべきベスト2動画

1.静的ポジショニング：static

static は、position 属性のデフォルト値であり、位置決めを行わないことを意味します。静的位置決めを使用する要素は、要素の通常の位置に従って表示され、top、bottom、left、right、および z-index 属性の影響を受けません。サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 100px;
            border: 1px solid black;
        }
        div.static {
            width: 130px;
            height: 50px;
            background-color: #CCC;
            line-height: 50px;
            text-align: center;
            position: static;
            top: 50px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">postiont: static;</div>
    </div>
</body>
</html>

実行結果は次の図のとおりです。

2.相対位置：relative

相対配置とは、デフォルトの位置を基準にして要素の位置を調整することです。上、下、左、右の 4 つの属性の組み合わせによって、デフォルトの位置を基準にしてさまざまな方向に要素のオフセットを設定できます。

[例] 次のコードは、相対位置の使用を示しています。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 1px solid black;
        }
        div.static {
            width: 140px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: relative;
            top: 25px;
            left: 10px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: relative;</div>
        <p></p>
    </div>
</body>
</html>

実行結果は次の図のとおりです。

注: 相対的に配置された要素は、移動して他の要素と重なることができますが、要素の既定の位置にスペースを保持します。

3.絶対位置決め：absolute

絶対配置とは、静的に配置されていない (静的) 最初の親要素を基準にして要素が配置されることを意味します。条件を満たす親要素が見つからない場合は、ブラウザウィンドウを基準にして配置されます。また、top、bottom、left、right プロパティを使用して、親要素またはブラウザウィンドウを基準にして要素のオフセットをさまざまな方向に設定することもできます。

絶対配置を使用する要素は元の位置から抜け出し、Web ページのスペースを占有しなくなります。相対配置と同様に、絶対配置を使用する要素もページ上の他の要素と重なります。また、絶対配置を使用する要素には余白を設けることができ、その余白は他の要素の余白と重なりません。

【例】絶対位置指定の使用例を以下に示します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 1px solid black;
            position: relative;
        }
        div.static {
            width: 150px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: absolute;
            bottom: 10px;
            right: 5px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: absolute;</div>
        <p>&lt;p&gt;</p>
    </div>
</body>
</html>

実行結果は次の図のとおりです。

4.固定位置：fixed

固定配置とは、ブラウザウィンドウを基準にして要素を配置することです。固定配置を使用する要素は、ページ上で固定されているかのように、ブラウザウィンドウのスクロールによって移動することはありません。Web ページでよく見かける「トップに戻る」ボタン固定位置を使用することによって達成されます。

【例】固定配置の使用例を以下に示します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 500px;
        }
        p {
            width: 150px;
            height: 50px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p class="fixed">position: fixed;</p>
    </div>
</body>
</html>

実行結果は次の図のとおりです。

Position sticky

固定配置は、上で紹介した 4 つの配置方法とは異なります。相対配置と固定配置を組み合わせたようなものです。ページをスクロールする場合、その効果は相対配置と同じです。要素がある程度スクロールすると、要素がスクロールします。再び表示されます. 固定位置の効果.たとえば、一部の Web ページのナビゲーションメニューは、ページが読み込まれるとデフォルトの位置にあり、ページを下にスクロールするとページの上部に固定されます。

[例] 次の例は、スティッキーポジショニングの使用を示しています。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 500px;
            position: relative;
        }
        p {
            width: 100%;
            height: 50px;
            margin: 0;
            text-align: center;
            line-height: 50px;
            background-color: #CCC;
        }
        p.sticky {
            background-color: blue;
            position: sticky;
            top:0px;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p class="sticky">position: sticky;</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
    </div>
</body>
</html>

実行結果は次の図のとおりです。

スティッキーポジショニングを使用する場合は、次の点に注意する必要があります。

position:sticky;を設定するときは、top、bottom、right、left の 4 つの属性のいずれかを定義する必要があります。定義しない場合は、相対的な位置決め状態のみになります。
固定配置要素を使用する親要素は、 overflow:hiddenまたはoverflow:auto属性を定義できません。
親要素の高さは、固定配置要素の高さより低くすることはできません。
固定配置要素は、その親要素内でのみ有効です。

「 CSS position」についてわかりやすく解説！絶対に観るべきベスト2動画

【HTML/CSS】カード型レイアウトのコーディング練習問題

位置・配置を指定するCSSプロパティ「position」4つの値の基本的な記述方法