Web フロントエンド面接の質問 8 - 絶対位置と相対位置

相対位置 (relative):

まず相対位置について話しましょう: その名前のとおり、相対、参照オブジェクトが存在する必要がありますが、この参照は他ではなく、元のドキュメント フロー内での独自の位置です。相対配置後の オブジェクト はドキュメント フローから完全に分離されておらず、ドキュメント内のオブジェクトの元の位置は保持され、オフセットされたオブジェクトは 他の レイヤーを覆います。

相対的な配置の特徴は次のように要約されます:

①相対的に配置された要素の場合、幅が設定されていない場合、幅はブラウザ全体の幅になるか、親要素の幅に依存します。

②相対的に配置されたブロック要素は、移動後もドキュメントフローの位置を占め、他の要素のレイアウトには影響しません

以下のコードで確認してください。ブラウザに 5 を配置します。ボックスは異なる色で表されます。コードは次のとおりです

HTML コード

CSS コード

初期レンダリング

3 番目 各ボックスの相対的な位置を設定します

要素は元の位置に対してオフセットされ、幅と高さは変更されません。コンテナーを拡張し、元の位置を占めます。他の要素のレイアウトには影響しません。

絶対配置 (絶対): 絶対配置されたオブジェクトはドキュメントフローから切り離され、絶対配置の基準位置はそれ自体ではなくなります。は、その親オブジェクトまたは上位オブジェクトが配置されているかどうかによって異なります。

left

、right、top、bottom、およびその他の 属性を使用して、相対または絶対配置設定で最も近い親オブジェクトを基準とした絶対位置を作成します。位置決め、親オブジェクトがpositioning属性を設定していない場合、htmlルート要素に相対的に配置されます。いくつかの投稿を読んだ後、親オブジェクトがpositioning属性を設定していない場合は、配置されると考えている人がいることがわかりました。本体に対して相対的に配置されています。このステートメントは間違っています。 絶対配置の特徴をまとめると以下の通りです

①絶対配置されたブロック要素の幅が設定されていない場合、幅は要素内の内容によって決まります

②切り離した後の元の位置は等価です次の要素が位置を占めます

③絶対配置オブジェクトは、相対配置または絶対配置に設定されている最も近い親オブジェクトを基準にして配置されます

④親要素が配置されていない場合は、配置されますHTML ルートを基準とした要素の位置決め

以下は、これら 5 つのボックスのオフセットによって引き続き検証されます

(1) ブロック要素にはオフセット値がありません

上記の 5 つのボックスでは、box5 のみに絶対位置が与えられます。オフセット値。この時点では、ブロック要素は元の位置に浮かんでいるだけです。その後ろにブロック要素がある場合、その位置がボックス 5 の下に追加されて、その効果を確認してみましょう。

注: 絶対位置のブロック要素の幅が定義されていない場合、幅は要素内のコンテンツによって決まります。

効果の画像は次のとおりです

ボックス6を追加する効果

写真からもわかるように、 box6 は、その位置のドキュメント フローで box5 を占有しています。

(2) オフセット値があります

オフセット値が設定されており、親要素が相対位置または絶対位置を設定していない場合、要素はルート要素 (つまり、html 要素) を基準に位置決めされます。ボディに対する相対ではなく、ルート要素に対する相対) box5 のオフセットを使用して確認します。

①ボックス5にオフセットを与えます。親要素には相対的または絶対的な位置がありません

効果の図は次のとおりです

②ボックス5に同じオフセットを与え、ボディに与えます要素は絶対配置されます (body 要素は絶対に設定され、絶対配置されたブロック要素の幅は最も長い p によって決定され、幅は小さくなります):

効果画像は次のとおりです。以下の通り

写真アプリから送信

上記の 2 つのレンダリングから、ルート要素に対する相対的な位置が本体に対する相対的な位置と異なることは明らかです。主な違いは、本体のマージン値が含まれます。

次に、5 つのボックスの外側にさらに 3 つの親ボックスをネストし、これら 3 つの親ボックスに位置を与えて、最後に配置された親要素に基づいてオフセットされているかどうかを確認します。

コードは次のとおりです

HTMLコード

CSSコード

レンダリング

アプリから送信された写真

from 上記から、box5 がそれに最も近いコンテナである 3 層目のコンテナを基準にして配置されていることが明らかです。興味があれば、第 3 層のコンテナの位置を削除して、第 2 層のコンテナと相対的に配置されているかどうかを確認してみてください。画像は掲載しません。

なぜ一番外側のボックスが絶対配置に設定され、他の 2 つのボックスが相対配置に設定されるのか疑問に思う人もいるでしょう。この配置方法の違いは主にボックスの幅に影響します。相対的に配置されたブロック要素の幅は設定されません。の場合、その幅は親要素がある場合、その幅は親要素によって決まります。このブロック要素の内容が大きすぎる場合は、親要素も拡大されます。

、つまり、相対的に配置されたブロック要素の幅は親要素に依存します。それでは、これら 3 つのコンテナーが絶対配置に設定されている場合、どのような影響があるでしょうか。まずレンダリングを見てみましょう。

アプリからの画像
画像からわかるように、第 3 層コンテナの幅は、ドキュメント フローから分離されているため、親要素に依存しなくなり、その幅は 1 つだけです。内容によって決まります。要約すると、絶対的に配置されたブロック要素の幅は、それ自体のコンテンツによって決まります。相対的に配置されたブロック要素の幅が設定されていない場合、デフォルトはブラウザの幅になります。ただし、幅に関係なく、絶対配置された要素は、配置のためにそれ自体に最も近い親要素 (絶対配置または相対配置) を見つけます。

概要:

relative: 位置決めは自身の位置を基準にします (オフセットを設定すると、自身の位置を基準にオフセットされます)。相対に設定された要素はドキュメント フロー内に残り、要素の幅と高さは変更されず、オフセットを設定しても他の要素の位置には影響しません。最も外側のコンテナは相対位置に設定されます。幅が設定されていない場合、幅はブラウザ全体の幅になります。

absolute: 絶対配置または相対配置に設定されている要素に最も近い親要素を基準にして配置が決定されます。親要素が絶対配置または相対配置に設定されていない場合、要素はルート要素を基準にして配置されます。 html要素。絶対設定された要素はドキュメント フローの外にあります。要素の幅が設定されていない場合、幅は要素内のコンテンツによって決まります。切り離した後、元の位置は空になっているのと同じになり、次の要素がその位置を占めます。

注: この記事の実験結果は、親要素と子要素が固定幅を設定していない場合に得られます。親要素が固定幅を設定している場合、その子要素は絶対配置か相対配置かに関係なく配置されます。親要素の幅を超えることはできず、親要素はそれを超えることはできません。

以上がWeb フロントエンド面接の質問 8 - 絶対位置と相対位置の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。