Position:absolute を適用すると Float:right が機能しなくなるのはなぜですか?

フローティング位置と絶対位置の競合

Web レイアウトでは、要素はフローティング位置や絶対位置など、複数の方法で配置できます。ただし、同じ要素で float と絶対配置の両方を使用すると、競合が発生する可能性があります。

div 要素を親 div の右端に残しておきたい状況を考えてみましょう。通常、float:right を使用すると、この結果が得られます。ただし、同じ div にposition:absolute も適用すると、float プロパティが無効になり、div が親の左端に移​​動します。

この動作の理由は、絶対配置によって要素が削除されるためです。文書の通常の流れ。 Position:absolute が適用されると、ブラウザは要素の新しく確立された絶対座標と組み合わせて float プロパティを解釈します。そのため、float:right は、親 div に対する要素の位置に影響を与えなくなりました。

この競合を解決して div を右に揃えるには、代わりに、position:absolute と right プロパティを適用します。

<code class="css">position:absolute;
right: 0;</code>

親要素の位置も相対位置に設定することを忘れないでください。

<code class="css">position:relative;</code>

このアプローチにより、要素はドキュメント フロー内での位置を維持しながら、親の右端に絶対的に配置されたままになります。

以上がPosition:absolute を適用すると Float:right が機能しなくなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。