-5

このリンクは言う

絶対位置要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。そのような要素が見つからない場合、それを含むブロックは<html>

つまり、絶対は相対的です。それでは、代わりに相対を使用しないのはなぜですか? 相対位置ではなく絶対位置を使用することによってのみ実行できる実用的なユースケースはありますか?

4

2 に答える 2

3

ですから、絶対は実際には相対的です。

いいえ、どちらも完全に異なります。レンダリングは完全に異なります。

相対的に配置された要素はドキュメント フロー内にありますが、absolute配置された要素はドキュメント フローの外にあります。

相対位置ではなく絶対位置を使用することによってのみ実行できる実用的なユースケースはありますか?

画像のホバーにタイトルが必要であると仮定すると、タイトルを含む要素absoluteを、配置する必要がある画像を保持する要素に配置する必要がありますrelative。position: relative;配置された要素を保持している要素に割り当てない場合absolute、absolute配置された要素は自然に流出します。

場合

ケース 2 (要素が配置されていない場合relative、absolute配置された要素は野生に流れ出します)

要するに、配置された要素はフローから外れているため、ドキュメント上で物理的なスペースを取らないと言うことができabsoluteます。それらはフロー内にあるため、配置された要素をページ上の任意の場所に移動しても、他の要素の位置には影響しませんが、要素をページ上の任意の場所に移動すると、他の要素に影響します-静的または相対的にその周りに配置されます.relativerelativeabsoluteposition: relative;

于 2013-08-10T04:37:28.943 に答える
1

配置された要素relativeは、ドキュメントの流れの中に残ります。追加の配置を指定すると、この位置から要素がオフセットされます。

配置を持つ要素absoluteは、ドキュメントの流れから削除され、最初の非静的な親要素に対して配置されます。

したがって、次の HTML 構造とそれに付随するfiddleがあるとします。

<div class="awesomeParent">
  <ul>
    <li>First Piggy</li>
    <li>Second Piggy</li>
    <li>Third Piggy</li>
    <li>Fourth Piggy</li>
  </ul>
</div>

ここで、相対位置と絶対位置を使用して少し変更された同じフィドルをチェックアウトします。違いを見ます？

2 番目のフィドルでは、相対配置を使用して、3 番目のリスト要素が配置されるスペースが保持されます。top: 40px;追加のルールによって相殺されているだけです。

ただし、3 番目のフィドルでは、絶対配置を使用すると、3 番目のリスト要素があるべきスペースがなくなります。つまり、その要素はdocument の通常のフローではなくなり、配置規則top: 40px;は最初の非静的な親に関するものになります。この場合、これは div.awesomeParentであり、position: relative. 親が見つからない場合、要素は要素に対して配置されhtmlます。したがって、要素を別の要素内に絶対的に配置するには、親自体で position fixed、absolute、または relative を使用する必要があります。

3つを比較できる画像：

ポジショニングが適用されていません 相対的な位置付け ここに画像の説明を入力

于 2013-08-10T04:39:23.147 に答える