CSS の位置決め – 絶対、相対、固定、およびスティッキー。-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の位置決め – 絶対、相対、固定、およびスティッキー。

PHPz

Sep 10, 2024 pm 06:00 PM

CSS Positioning – Absolute, Relative, Fixed, and Sticky.

レクチャー 11: CSS の配置 – 絶対、相対、固定、およびスティッキー

「基礎から輝きへ」 コースの 11 番目の講義へようこそ。この講義では、さまざまなタイプの CSS 配置: 相対、絶対、固定、および スティッキー について説明します。 🎜>。配置を理解すると、要素がページ上のどこに表示されるか、およびユーザーがコンテンツを操作するときに要素がどのように動作するかを制御できるようになります。

1.位置プロパティを理解する

position プロパティは、ドキュメント内で要素を配置する方法を指定します。次の値を取ることができます:

static: デフォルト値。要素は通常のドキュメントフローに従って配置されます。
relative: 要素は通常の位置を基準にして配置されます。
absolute: 要素は、最も近い位置にある祖先または最初の包含ブロックを基準にして配置されます。
修正: 要素はブラウザウィンドウを基準にして配置され、スクロールしても同じ位置に残ります。
sticky: 要素は、しきい値 (スクロール位置など) に達するまでは相対として扱われ、その後固定されます。

2.相対位置

position:relative を持つ要素は、元の (静的) 位置を基準にして配置されます。これはドキュメントフローに残ります。つまり、他の要素は引き続きそれを考慮します。

例: 相対位置を使用して要素を移動します。

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

ログイン後にコピー

この例では、要素は元の位置から下に 20 ピクセル、右に 30 ピクセルシフトされますが、ドキュメントフロー内のスペースは維持されます。

3.絶対位置決め

position:Absolute を持つ要素はドキュメントフローから削除され、最も近い位置にある祖先 (つまり、静的以外の位置を持つ祖先) を基準にして配置されます。

例: コンテナ内の要素を絶対的に配置します。

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

ログイン後にコピー

この例では:

.box は、.container 要素の内側上から 50 ピクセル、右から 20 ピクセルの位置に絶対的に配置されます。
.container には location:relative があり、.box の位置参照となります。

4.固定位置

position:fixed を持つ要素は、ページのスクロール方法に関係なく、ブラウザウィンドウを基準にして配置されます。

例: 固定ナビゲーションバーを作成します。

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

ログイン後にコピー

この例では:

.navbar はビューポートの上部に配置され、ページがスクロールされても固定されたままになります。

5.スティッキーな位置決め

position: Sticky を持つ要素は、ユーザーがスクロールして定義されたしきい値を超えるまで相対として扱われ、その時点で固定になります。

例: スクロール後も上部に残る固定ヘッダー。

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

ログイン後にコピー

この例では:

.header は、ページの先頭に到達するまでは通常の要素のように動作します。その後、それは上部に固定され、ユーザーがスクロールしても表示されたままになります。

6. Z インデックス

要素を配置するとき (相対、絶対、固定、またはスティッキーのいずれか)、z-index プロパティを使用して要素の重なり順を制御できます。 z-index 値が高いほど、要素は低い要素の上に表示されます。

例: 積み重ね順序を制御します。

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

ログイン後にコピー

この例では:

.box2 は、z-index 値が高いため、.box1 の上に表示されます。

7.位置決めテクニックの組み合わせ

位置の値を組み合わせて高度なレイアウトを作成できます。

例: 相対的なコンテンツ領域を持つサイドバーを修正しました。

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

ログイン後にコピー

このレイアウトでは: