静的位置決めと相対位置決めの違い

Question

CSS では、静的 (デフォルト) 配置と相対配置の違いは何ですか?

Answer 1

「なぜ CSS はまだ Position:static; を実装しているのですか?」への答えとしては、場合によっては、親要素にposition:relative、子要素にposition:absoluteを使用すると、子要素のスケーリング幅が制限されることがあります。水平メニュー システムでは、「列」をリンクしている可能性がありますが、width:auto を使用すると相対的な親要素では機能しません。この場合、「静的」に変更すると、その中のコンテンツに基づいて幅を変更できるようになります。

私はコンテナの内容に基づいてコンテナのサイズを変更できない理由に何時間も苦労しました。お役に立てれば！

Answer 2

静的配置は、要素のデフォルトの配置モデルです。これらは、通常の HTML フローの一部としてページ上にレンダリングされます。静的に配置された要素は、left、top、right、および bottom のルールに従いません。

相対位置指定を使用すると、HTML フロー内の要素の通常の位置を基準とした特定のオフセット (

left、top など) を指定できます。したがって、div 内にテキストボックスがある場合、テキストボックスに相対位置を適用して、div 内の通常配置される場所を基準にしてテキストボックスが表示されるようにすることができます。特定の場所:

絶対位置指定もあります。要素の正確な位置をドキュメント全体に対して相対的に指定することもできます (

または、要素ツリー内で次に相対的に配置された要素 上位レベルに相対して指定することもできます):

position:relative が階層内の親要素に適用される場合:

絶対的に配置された要素は、相対的に配置された要素によって制限されることに注意してください。

最後に固定位置です。固定位置では、要素がビューポート内の特定の位置に制限され、スクロール中に変更されないままになります:

また、固定位置の要素はビューポートに制約された要素とはみなされないため、スクロールが発生しないこともわかります。

絶対に配置された要素は依然としてビューポートによって制限されており、スクロールが発生します:

もちろん、親要素が

overflow: ?

を使用してスクロールの動作 (存在する場合) を決定する場合は除きます。 絶対配置と固定配置を使用すると、要素は HTML フローから外れます。