CSS における位置指定の概要

CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類の配置方法について簡単に紹介します。

静的ポジショニング：適用シナリオは多くないため、ここでは紹介しません。

以下では、主に他の3つの一般的なポジショニングを紹介します。

1. 位置: 相対配置: その名の通り、相対配置は元の位置を基準にして対応する変更を加えることです。要素は移動後も元の位置を占めることに注意してください (これが相対配置の最も重要なポイントです)

以下はコードのデモンストレーション部分です。

<スタイル>
        * {
            マージン: 0;
            パディング: 0;
            /* ここですべての余白とパディングをクリアします。
            特に意味はなく、観察の便宜上のためだけのものです*/
        }
        
        。ピンク {
            幅: 80ピクセル;
            高さ: 80px;
            背景色: ピンク;
        }
        
        。紫 {
            幅: 80ピクセル;
            高さ: 80px;
            背景色: 紫;
        }
        
        。緑 {
            幅: 80ピクセル;
            高さ: 80px;
            背景色: 緑黄色
        }
    </スタイル>

ここでは3つのdivが定義され、対応する色が与えられています。実行結果は次のとおりです。

ここに画像の説明を挿入

子ボックスに次の配置属性が与えられている場合

 。紫 {
            位置: 相対的;
            上: 0;
            左: 80px;
            /* 相対的な位置指定は上記のボックスに追加されます。
            そして、元の状態から 80 ピクセル移動します*/
            幅: 80ピクセル;
            高さ: 80px;
            背景色: 紫;
        }

ここに画像の説明を挿入

ページは次のようになります。これは最も重要な点も証明しています。要素は移動後に元の位置を占め、そうでなければ緑のボックスが上になります。

2.位置:absolute絶対位置指定:絶対位置指定は、自身の親要素によって行われる位置変更です。親要素に位置属性がある場合、対応する移動は親要素に基づいて行われます。親要素に位置属性がない場合(または親要素がない場合)、対応する移動はブラウザに基づいて行われます。要素は移動後に元の位置を占めないことに注意してください。
以下はコードのデモンストレーションです

。紫 {
            位置: 絶対;
            上: 160;
            左: 80px;
            /* この紫色のボックスには親要素がないので、ブラウザに基づいて配置されます */
            幅: 80ピクセル;
            高さ: 80px;
            背景色: 紫;
        }

ここに画像の説明を挿入