固定配置と固定配置を区別する-CSSチュートリアル-php.cn

固定配置と固定配置を区別する

王林

リリース： 2024-02-18 22:42:22

オリジナル

623 人が閲覧しました

固定配置と固定配置を区別する

固定配置と固定配置は、Web デザインと開発で一般的に使用される 2 つの配置方法です。どちらも要素をページ上の特定の位置に固定できますが、方法は異なります。この記事では、固定配置と固定配置の違いを詳しく紹介し、読者の理解を助ける具体的なコード例を示します。

スティッキー配置:
スティッキー配置とは、スクロール時に要素をページ上の特定の位置に固定できることを意味します。スクロール位置が指定された位置に達すると、要素のスクロールが停止します。ページに固定されています。スティッキーの位置はドキュメントフローに関連しており、通常のドキュメントフローレイアウトでは、スクロールに応じて要素の位置が変わります。スティッキー配置では、要素の位置は上、下、左、右などの属性によって決まります。

以下は、ページの上部にスクロールするときにページの上部に固定されたナビゲーションバーの効果を実装する簡単なサンプルコードです。 navbar の位置属性はスティッキーで、top は 0 に設定されます。これにより、スクロール時にナビゲーションバーがページの上部に固定される効果が得られます。

固定位置:

<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px 0;
  text-align: center;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<div style="height:500px">
  <p>Scroll down to see the effect</p>
</div>

</body>
</html>

ログイン後にコピー

上記のコードでは、フロートボタンの設定位置属性は固定されており、ページの右下隅に固定されたフローティングボタンの効果を実現するために、下が 20 ピクセル、右が 20 ピクセルに設定されています。

要約:

スティッキー配置と固定配置はどちらも要素の固定効果を実現できますが、方法と効果は異なります。固定配置は、ドキュメントフローを基準とした配置方法です。指定した位置までスクロールすると、要素はページ上で固定されます。固定配置は、ブラウザウィンドウを基準とした配置方法です。要素は、ブラウザウィンドウを基準とした配置方法です。スクロールされるかどうか。特定のニーズに応じて、適切な位置決め方法を選択できます。

以上が固定配置と固定配置を区別するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。