CSSにおける相対配置と絶対配置の導入と使用

1. 位置の 4 つの値: 静的、相対、絶対、固定。

絶対配置:絶対と固定を総称して絶対配置と呼びます

相対配置:相対

デフォルト値:静的

2.相対配置と絶対配置の違い

例:

HTMLコード:

css コード:

1.position:相対; 要素が相対的に配置されている場合、最初にその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対的に配置されている場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、要素は他のボックスを覆うことになります。) たとえば、 #mybox{position: relativ; left: 20px; top: 20px;} 効果は、このレイヤーを田園地帯にし、左に 20 ピクセル移動します。

2.position:Absolute; 位置はブラウザの左上隅の 0 点に基づいて計算されるため、要素はスペースを占有しません。通常のドキュメント フロー内の要素は、絶対配置された要素が存在しないかのようにレイアウトされます。これは、最も近い位置にある祖先を基準にして配置されます。要素に配置された祖先がない場合、その位置は最も古い包含ブロックを基準に配置されます。 (絶対配置ボックスはドキュメント フローから独立しているため、ページ上の他の要素をカバーでき、これらのボックスの積み重ね順序は z-index によって制御できます。z-index の値が大きいほど、ボックスはより遠くに配置されます。ヒープ。)

現在、私たちが作成するほとんどの Web ページは中央に配置されているため、解像度に関係なく、この要素は Web ページ内の特定の要素の位置に従う必要があります。ページ内の特定の要素の場合、単純な絶対値は機能しません。正しい解決策は、要素の親要素をposition:relative;として定義し(ここでは祖父母にすることも、position:absolute;にすることもできます)、絶対的に配置する必要がある要素をposition:absolute;に設定することです。そして、top、right、bottom、left の値を設定すれば十分なので、配置の参照基準は親の左上隅のパディングの左上になります。

以上がCSSにおける相対配置と絶対配置の導入と使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。