ホームページ > 記事 > ウェブフロントエンド > HTML では固定位置が許可されないのはなぜですか?原因分析
HTML では固定位置が許可されないのはなぜですか?原因分析
- PHPzオリジナル
- 2023-12-28 18:14:06596ブラウズ
固定位置を 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> 要素を作成し、ページの左上隅に配置しました。ただし、要素は固定された方法で配置されるため、通常のドキュメント フローがオーバーライドされ、他のコンテンツが正しくレイアウトされなくなります。この例では、<code><div id="mainContent"> が <code><div id="fixedDiv"> と重なり、ページのメイン コンテンツがカバーされます。 。 <p>第 2 に、固定位置により、画面サイズが小さいデバイスでは表示の問題が発生する可能性があります。モバイル デバイスでは、ユーザーは指を使ってスクロールすることが多いため、固定配置された要素と競合する可能性があります。例: </p><pre class='brush:html;toolbar:false;'><!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></pre><p>上の例では、固定位置の <code><div> 要素をページの右下隅に配置しました。ただし、ユーザーがモバイル デバイスでページをスクロールすると、固定配置された要素によってページのコンテンツが見えにくくなり、ユーザーがページ内を移動することが困難になる場合があります。この場合、固定配置は優れたユーザー エクスペリエンスを提供できないだけでなく、ページ レイアウトを混乱させる原因にもなります。 <p>したがって、固定配置を HTML で直接使用することはできません。ただし、いくつかのトリックと他の CSS プロパティの適用を組み合わせれば、固定位置と同様のことを実現できます。一般的なアプローチは、<code>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/