CSS の position 属性の値に関する研究 (概要)

CSS の位置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します。

位置属性は特定の配置の前に使用する必要があります。そうしないと、すべての特定の配置属性が有効になりません。

位置には、静的、相対的、絶対的、固定、またはスティッキーの 5 つの値があります。

以下、ブロガーがコードの比較と実行結果を一つずつ説明します。

まず、position属性が設定されていません。2つの要素のtop属性は有効ではなく、color属性が有効であることがわかります。現在の位置は、デフォルトのドキュメントフローでの位置です。これは、位置を変更したときに要素の位置がどのように変化するかを比較するためのプロトタイプとして使用されます。

<!DOCTYPE html>

<html lang="ja">

<ヘッド>

    <メタ文字セット="UTF-8">

    <link rel="スタイルシート" href="./j.css">

</head>

<本文>

    <div class="box" id="one">1</div>

    <div class="box" id="two">2</div>

    <div class="box" id="three">3</div>

    <div class="box" id="four">4</div>  

</div>

</本文>

</html>

。箱 {
    表示: インラインブロック;

    背景: 赤;
    色: 白;
  }
  
  ＃二 {
    上: 260px;
    下部: 126px;
    左: 20px;
    背景: 青;
  }

位置：静的

次のように #two クラスに position: static; を追加します (後続の各位置では位置の値のみが変更されます)

＃二 {
    位置:静的;
    上: 260px;
    下部: 126px;
    左: 20px;
    背景: 青;
  }

HTML 要素のデフォルト値は、配置がなく、通常のフローで表示されることです。

静的に配置された要素は、上、下、左、右の影響を受けません。

この値は位置決め属性を無効にするので、その存在の意味は何でしょうか?

Web ページのスタイルを変更するプロセス中に、特定の要素の位置情報を一時的にブロックしたり、変更中に特定の部分の位置情報を保持して回復を容易にしたりすることができます。

位置：相対

相対配置は、元の通常の文書フローを基準とした配置ですが、配置中に元のページレイアウトは変更されません。配置された要素を移動するだけと同じで、移動された比較基準位置は通常の文書フローでの位置となり、元の位置は空白のままになります。

位置: 絶対

絶対配置では、要素は通常のドキュメントフローから削除され、ページレイアウト内に要素用のスペースが作成されません。最近配置された親要素を基準にして配置されます。この例では、配置は body 要素に基づいています。

位置: 固定

固定配置は、通常のドキュメントフローから削除され、ページレイアウトに要素のためのスペースを作成しないという点で絶対配置に似ています。違いは、ビューポートに固定され、ビューポートに基づいて配置されることです。多くのWebページを閲覧しているときに、誰もがこのような経験をしたことがあると思います。Webページの上部または下部に、Webページのスクロールに合わせて移動しない広告があります。それらはWebページに固定されており、スタック順序を変更するためにz-indexが設定されていない場合、Webページのコンテンツをカバーします。