CSS の絶対位置指定で自動マージンが機能しないのはなぜですか?

CSS の絶対位置と自動マージンの競合

CSS では、絶対位置プロパティによりドキュメントの通常のフローから要素が削除されます。これは、top、left、right、bottom のプロパティに基づいて配置されます。ただし、margin-left プロパティと margin-right プロパティが絶対位置で auto に設定されている場合、それらは何の効果もありません。

これは、margin-left: auto プロパティと margin-right: auto プロパティが原因です。要素をその要素を含むブロック内の中央に配置しようとします。絶対位置を持つ要素の場合、その要素を含むブロックがドキュメント本体になります。ただし、ドキュメントの本文自体には幅が設定されていないため、ブラウザは要素を中央に配置する場所を決定できません。

一方、position プロパティが相対に設定されている場合、要素は要素から削除されます。通常のフローですが、その仮想ボックスはドキュメント フロー内に残ります。この場合、margin-left と margin-right が auto に設定されている場合、マージンは包含ブロックの幅に基づいて計算されます。相対的に位置する要素の場合、それは依然として文書本体です。ただし、ドキュメント本文には幅が設定されているため、ブラウザは要素を中央に配置する場所を正確に決定できます。

絶対位置で要素を中央に配置するには:

代わりにmargin-left: auto と margin-right: auto を使用すると、left プロパティと right プロパティを 50% に設定できます。これにより、要素がドキュメント本文内の中央に配置されます。要素が画面外に移動しないようにするには、top プロパティとbottom プロパティを指定する必要もあります。

以上がCSS の絶対位置指定で自動マージンが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。