HTML+CSS - 簡単な説明: 相対配置と絶対配置_html/css_WEB-ITnose

相対配置と絶対配置

・配置タグ: position
・含まれる属性: relative (相対) 絶対 (絶対)

1.position:relative; 要素が相対位置の場合している、最初にそれがある場所に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対配置の場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、要素は他のボックスを覆います)


2.position:absolute; は絶対配置を意味します。位置はブラウザの左上隅に基づきます。角度の計算が始まります。 絶対配置では要素をドキュメント フローから取り出すため、スペースを占有しません。通常のドキュメント フロー内の要素は、絶対配置された要素が存在しないかのようにレイアウトされます。 (絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素をカバーでき、その階層順序は Z インデックスによって制御できます。Z インデックスの値が大きいほど、より高い位置に表示されます。)


3. 親コンテナが相対配置を使用し、子要素が絶対配置を使用すると、子要素の位置はブラウザの左上隅を基準とするのではなく、親ウィンドウの左上隅を基準とするようになります


4. 相対配置と絶対配置 特定の位置を特定するには、top、right、bottom、left とともに使用する必要があります。これらの 4 つの属性は、要素が配置された後にのみ有効になり、それ以外の場合は無効になります。 さらに、これら 4 つの属性は同時に使用できるのは隣接する 2 つだけです。上下を同時に使用したり、左右を同時に使用したりすることはできません。

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。