「position:Absolute」プロパティのデフォルト値は何ですか?また、それらが位置ずれを引き起こす理由は何ですか?-CSSチュートリアル-php.cn

「position:Absolute」プロパティのデフォルト値は何ですか?また、それらが位置ずれを引き起こす理由は何ですか?

Barbara Streisand

リリース： 2024-11-07 09:43:02

オリジナル

703 人が閲覧しました

What are the Default Values for `position: absolute` Properties and Why Do They Cause Misalignment?

位置のデフォルト値: 予期せぬ位置ずれの絶対値

Web 開発プロジェクトでは、開発者が絶対位置の使用中に要素の位置ずれに関する問題に遭遇することがあります。回避策として、明示的なパラメータを指定せずにposition:Absoluteを設定すると問題が解決される場合があります。このため、これらのパラメータのデフォルト値は何なのかという疑問が生じます。

絶対配置では概念的に要素をその要素を含むブロックとの関係で配置しますが、top、left、bottom、right プロパティのデフォルト値はそうではありません。直感的。予想に反して、これらは 0 に設定されていません。

CSS Working Group のレベル 3 仕様で指定されているように、これらすべてのプロパティのデフォルト値は auto です。これは、要素が絶対的に配置されていないかのように、静的な位置に留まるということを意味します。

たとえば、次のコードを考えてみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  position:absolute;
}
</style>
</head>

<body>
<h1>Absolute pos</h1>
<p>Paragraph</p>
</body>

</html>

ログイン後にコピー

明示的な配置がなければ、h1 要素は元の位置に残ります:

[レイアウトの左上隅に配置された h1 要素の画像]

絶対配置された要素の位置は、次の制約によって決定されます:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

ログイン後にコピー

「left」、「width」、「right」の 3 つがすべて「auto」の場合、「left」の値が静的位置に設定されます。同様に、垂直方向の位置は次によって制約されます。

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

ログイン後にコピー

「top」、「height」、「bottom」の 3 つすべてが「auto」の場合、「top」の値は静的位置に設定されます。 .

結論として、明示的な値を指定せずに絶対配置を使用すると、要素は静的な位置に残ります。この動作は予期しないように見えるかもしれませんが、CSS 仕様に文書化されています。これらのデフォルト値を理解することは、位置ずれの問題を回避し、複雑な Web レイアウトでの正確な位置決めを促進するのに役立ちます。

以上が「position:Absolute」プロパティのデフォルト値は何ですか?また、それらが位置ずれを引き起こす理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。