絶対位置または固定位置の要素が予期した場所にないのはなぜですか?

絶対または固定位置の要素が予期した場所に配置されない理由

CSS の配置では、絶対要素および固定要素はビューポートまたは最も近い位置にある親要素を基準にして配置されます、 それぞれ。ただし、その動作を理解するのは難しい場合があります。

静的位置を理解する

要素の位置プロパティが auto または static に設定されている場合、要素は 静的位置 とみなされます。これは、その位置が静的であるかのように配置されることを意味します。この場合、要素の位置は、マージン、境界線、パディング、コンテンツに基づいて計算されます。

シナリオ 1: 相対親の外側にある絶対的なグレーのボックス

最初のコード スニペットでは、灰色のボックスは絶対位置を持っています。ただし、親コンテナ (

) の位置は相対的です。プロパティを作成し、その子に対して新しい位置決めコンテキストを作成します。灰色のボックスは最後の子であるため、コンテナの下部を基準にして配置されます。

シナリオ 2: 灰色のボックスが左上隅にない

2 番目のコード スニペット内、灰色のボックスがコンテナ内の 2 番目の位置に移動しました。ただし、コンテナにはパディングがあるため、まだ左上隅にはありません: 40px 20px;要素の仮想的な静的位置に影響を与えるルール。灰色のボックスは、この調整された静的位置を基準にして配置されます。

結論

絶対要素または固定要素を正しく配置するには、静的位置の概念とその計算方法を理解することが重要です。マージン、境界線、パディング、コンテンツに基づいて決定されます。この知識により、さまざまな配置コンテキスト内でのこれらの要素の動作を予測できるようになります。

以上が絶対位置または固定位置の要素が予期した場所にないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。