HTML では固定位置が許可されないのはなぜですか?原因分析-htmlチュートリアル-php.cn

HTML では固定位置が許可されないのはなぜですか?原因分析

PHPz

リリース： 2023-12-28 18:14:06

オリジナル

643 人が閲覧しました

HTML では固定位置が許可されないのはなぜですか?原因分析

固定位置を HTML で使用できないのはなぜですか?

固定配置 (固定配置) は、ユーザーがページをどのようにスクロールしても、ブラウザウィンドウ内で要素を固定位置に配置できる CSS の配置方法です。ただし、HTML での固定位置の適用には制限があり、要素やシナリオによっては異なる問題が発生する可能性があります。次に、固定配置が HTML で使用できない理由を分析し、理解を容易にするために具体的なコード例を示します。

まず第一に、固定配置の中心となる機能は、要素がドキュメントフロー内の他の要素に対してではなく、ブラウザウィンドウに対して相対的に配置されることです。この配置により、場合によってはページレイアウトが混乱したり重複したりする可能性があります。次の例を考えてみましょう:

<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
}

#mainContent {
  background-color: yellow;
  height: 2000px;
}
</style>
</head>
<body>
<div id="fixedDiv">这是一个固定定位的元素</div>
<div id="mainContent">这是页面的主要内容</div>
</body>
</html>

ログイン後にコピー

上の例では、固定位置の <div> 要素を作成し、ページの左上隅に配置しました。ただし、要素は固定された方法で配置されるため、通常のドキュメントフローがオーバーライドされ、他のコンテンツが正しくレイアウトされなくなります。この例では、<div id="mainContent"> が <div id="fixedDiv"> と重なり、ページのメインコンテンツがカバーされます。。

第 2 に、固定位置により、画面サイズが小さいデバイスでは表示の問題が発生する可能性があります。モバイルデバイスでは、ユーザーは指を使ってスクロールすることが多いため、固定配置された要素と競合する可能性があります。例:

<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 200px;
  height: 100px;
  background-color: red;
}

#mainContent {
  background-color: yellow;
  height: 2000px;
}
</style>
</head>
<body>
<div id="fixedDiv">这是一个固定定位的元素</div>
<div id="mainContent">这是页面的主要内容</div>
</body>
</html>

ログイン後にコピー

上の例では、固定位置の <div> 要素をページの右下隅に配置しました。ただし、ユーザーがモバイルデバイスでページをスクロールすると、固定配置された要素によってページのコンテンツが見えにくくなり、ユーザーがページ内を移動することが困難になる場合があります。この場合、固定配置は優れたユーザーエクスペリエンスを提供できないだけでなく、ページレイアウトを混乱させる原因にもなります。

したがって、固定配置を HTML で直接使用することはできません。ただし、いくつかのトリックと他の CSS プロパティの適用を組み合わせれば、固定位置と同様のことを実現できます。一般的なアプローチは、position: Sticky; 属性を使用することです。これにより、要素をその親に対して相対的に配置し、表示領域内に留めることができます。さらに、アダプティブレイアウトやメディアクエリなどの技術を使用して、さまざまなサイズのデバイスやさまざまなブラウザ環境に適応することで、同様の効果を実現できます。


要約すると、固定配置には特別な配置要件がいくつかありますが、HTML での適用は限定されています。したがって、より良いユーザー エクスペリエンスを実現するには、他の CSS プロパティとテクノロジを通じてページ レイアウトと位置の問題を解決する必要があります。 
参考:

MDN Web ドキュメント: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
CSS -トリック: https://css-tricks.com/almanac/properties/p/position/

以上がHTML では固定位置が許可されないのはなぜですか?原因分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。