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

レクチャー 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;
  }

このレイアウトでは:

• The .sidebar is fixed to the left of the page and stays visible when scrolling.
• The .content area is positioned relatively and adjusts its margin to account for the sidebar.

Practice Exercise

1. Create a webpage with a fixed header and footer, and use relative and absolute positioning for the content.
2. Add a sticky sidebar that becomes fixed when scrolling.

Next Up: In the next lecture, we’ll dive into CSS Transforms and Animations, where you'll learn how to animate your web elements with ease. Get ready to make your designs dynamic and interactive!

follow me on LinkedIn
Ridoy Hasan

以上がCSS の位​​置決め – 絶対、相対、固定、およびスティッキー。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。