固定配置と固定配置の違いは何ですか?-htmlチュートリアル-php.cn

固定配置と固定配置の違いは何ですか?

王林

リリース： 2024-02-18 16:04:06

オリジナル

654 人が閲覧しました

固定配置と固定配置の違いは何ですか?

固定配置と固定配置は、Web 開発における 2 つの一般的な配置方法ですが、要素の配置効果を実現する点でいくつかの違いがあります。この記事では、固定配置と固定配置の違いを、具体的なコード例とともに詳しく説明します。

1. Sticky Positioning
Sticky Positioning (スティッキーポジショニング) は CSS3 で導入され、要素が特定の位置までスクロールする際に、要素を画面上の指定位置に固定することができます。特定の位置を超えると、要素は通常のフロー位置に戻ります。他の配置方法と比較して、スティッキー配置はより柔軟で便利であり、さまざまなシナリオに適用できます。

スティッキー配置を特に使用する場合は、要素の position 属性を sticky に指定し、top、 を渡す必要があります。 bottom 、 left または right を使用して、要素のスティッキー位置オフセット値を決定します。

以下は具体的なコード例です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .header {
        position: sticky;
        top: 0;
        background-color: #f1f1f1;
        padding: 10px;
        text-align: center;
      }
      .content {
        height: 2000px;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>这是一个粘性定位的标题</h1>
    </div>
    <div class="content">
      <h2>这是页面内容</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
  </body>
</html>

ログイン後にコピー

上記のコードでは、.header 要素がスティッキー配置に設定され、top: 0; が渡されます。 画面の上部にピン留めします。ページが特定の位置までスクロールすると、.header 要素は画面の上部に残ります。

2. 固定配置
固定配置 (固定配置) は、ブラウザウィンドウを基準にして要素を配置するために使用される CSS の配置方法です。固定位置の要素は、ページのスクロール中に常に指定された位置に留まり、スクロールによって変化することはありません。

特に固定位置を使用する場合は、要素の position 属性を fixed として指定し、top、 を渡す必要があります。 Bottom 、 left または right を使用して、ブラウザウィンドウを基準とした要素の位置の値を決定します。

以下は具体的なコード例です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        background-color: #f1f1f1;
        padding: 10px;
      }
      .content {
        height: 2000px;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="fixed">
      <h2>这是一个固定定位的元素</h2>
      <p>该元素将一直停留在浏览器窗口的右下角。</p>
    </div>
    <div class="content">
      <h2>这是页面内容</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
  </body>
</html>

ログイン後にコピー

上記のコードでは、.fixed 要素が固定位置に設定され、bottom: 0; が渡されます。 と right: 0; ブラウザウィンドウの右下隅に固定します。

3. 違いの比較

固定配置と固定配置はどちらも要素の固定効果を実現できますが、特定のアプリケーションではいくつかの違いがあります。
固定配置された要素は、特定の位置に「固定」されたままになります。ページが特定の位置を超えてスクロールすると、要素は通常の流れる位置に戻ります。固定位置要素は常に指定された位置に留まり、ページがスクロールしても変化しません。
スティッキー配置の特定の位置は、top、bottom、left、または right で指定できます。固定位置位置の値は、top、bottom、left、または right によってのみ決定でき、要素の位置を相対的に決定します。ブラウザウィンドウ。
固定配置は固定配置よりも柔軟であり、さまざまなシナリオに適用できます。ただし、古いブラウザでのスティッキー配置の互換性には特定の問題があるため、互換性に注意する必要があります。