オフセットが指定されていない場合、絶対に配置された要素はどこに行くのでしょうか?

Position: Absolute Default Alignment

position:Absolute を使用すると、要素は、その要素を含むブロックを基準にして配置されます。ただし、特定のオフセットが指定されていない場合は、デフォルト値が適用されます。

結局のところ、position:Absolute のデフォルト値は、top:0 ではありません。左: 0 ですが、むしろ自動です。 CSS 仕様によれば、3 つのオフセット (上、幅、右) がすべて auto に設定されている場合、要素は「静的位置」に残ります。

静的配置

静的位置は、要素が完全に配置されていない場合と同様、レイアウト内での要素の自然な位置を指します。絶対位置の要素の場合、それを含むブロックが静的位置の幅を決定します。

水平配置

左、幅、右がすべて自動に設定されている場合、要素の幅は「縮小してフィット」です。これは、コンテンツを収容するのに必要な幅を取ることを意味します。次に、要素が含まれるブロック内で正しく配置されるように、左オフセットが計算されます。

垂直配置

同様に、上、高さ、下が設定されている場合、 auto に設定すると、要素の高さはその内容に基づきます。次に、上部のオフセットが計算され、含まれるブロック内で適切な位置が確保されます。

例

提供された HTML コードでは、h1 要素は明示的なオフセットなしで絶対に配置されます。 :

h1 {
  position: absolute;
}

デフォルトでは、h1 要素は静的な位置 (包含ブロックの先頭) に残ります。この場合、包含ブロックは

であるため、h1 要素はページの先頭に配置され、左余白に揃えられます。

結論

オフセットを指定せずにposition:Absoluteを使用する場合、要素のデフォルトの位置は、その要素を含むブロックとそのコンテンツによって決定され、レイアウト内で適切な配置が保証されます。

以上がオフセットが指定されていない場合、絶対に配置された要素はどこに行くのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。