絶対に配置された要素が時々ずれて見えるのはなぜですか?

絶対に配置された要素のデフォルトの位置について

position:Absolute プロパティを使用すると、要素の位置がずれているという問題がよく発生します。これは、これらのプロパティのデフォルト値が期待どおりでない場合に発生します。

HTML では、絶対位置に配置された要素は、周囲のコンテンツに影響を与えることなく配置されます。ただし、デフォルトでは、上、左、下、右の値は 0 に設定されません。

デフォルト値

代わりに、これらすべてのプロパティのデフォルト値は auto です。これは、要素の位置が、静的でない位置を持つ最も近い祖先要素である、その要素を含むブロックに基づいて計算されることを意味します。

3 つのプロパティ (left、width、right) がすべて auto に設定されている場合、要素の位置は、静的位置、つまり要素が絶対に配置されていない場合は元の位置を基準にして決定されます。

CSS 仕様 (セクション 10.3.7) によると、

3 つすべての場合'left'、'width'、および 'right' の 'auto' が 'auto' である: まず、'margin-left' および 'margin-right' の 'auto' 値を 0 に設定します。次に、ブロックを含む静的位置を確立する要素は 'ltr' で、静的位置に 'left' を設定し、以下のルール 3 を適用します。それ以外の場合は、「right」を静的位置に設定し、以下のルール 1 を適用します。

同様に、垂直方向の寸法の場合、プロパティ (上部、高さ、下部) は次のように計算されます (セクション 10.6.4)。

「top」、「height」、「bottom」の 3 つすべてが自動の場合、「top」を静的位置に設定し、以下のルール 3 を適用します。

より簡単に言うと、要素が絶対に配置されている場合でも、デフォルトの位置はレイアウト内の要素の元の位置です。

以上が絶対に配置された要素が時々ずれて見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。