CSS の位​​置決めにおける Positoin、絶対、および相対に関する研究_Experience 交換

Positoin 属性には 4 つの値があります: static、fixed、absolute、relative。後者の 2 つは、レイアウト内の位置決めによく使用されます。名前が示すように、absolute は絶対位置決めを指します。つまり、オブジェクトをドキュメント フローからドラッグして、 left、Right、top、bottom およびその他の属性は絶対位置決めを実行し、それらのカスケードは z-index 属性を通じて定義されます。オブジェクトには余白がなくなりましたが、パディングと境界線はまだあります。相対的とは相対的な位置決めを指し、左、右、上、下、その他の属性に基づいて通常のドキュメント フロー内の位置をオフセットします。
しかし、絶対的な法則とは何で、相対的な法則とは何でしょうか？これまでじっくり勉強したことがなく、具体的な応用となると戸惑うこともありますが、同じような悩みを持つ友人も多いと思います。今日、私は特別にテストし、次の結論に達しました:

1. Positoin 属性値が相対の場合
オブジェクトが占めていた元の位置は保持され、オブジェクトは元のドキュメント フローは依然として元の位置を維持します
トップの値は、元の位置に対するオブジェクトの下方オフセット距離を表します
ボトムの値は、オブジェクトの上方オフセット距離を表します元の位置へ
両方が同時に存在する場合はTopのみが機能します。

左の値は、元の位置を基準としたオブジェクトの右への距離を表します
右の値は、元の位置を基準としたオブジェクトの左への距離を表します
両方の場合同時に存在する場合は、左のみが有効になります。

2. Positoin 属性値が絶対値の場合
オブジェクトがドキュメント ストリームから抽出され、元の位置が後続のオブジェクトに置き換えられます。
値Top の値は、オブジェクトの上端とブラウザ ウィンドウの上端との間の距離を示します
bottom の値は、オブジェクトの下端とブラウザ ウィンドウの下端との間の距離を示します
両方が存在する場合同時に、Top のみが有効になります。両方が指定されていない場合、もう一方の Top 位置は元のドキュメント フロー位置と一致します。つまり、垂直位置は変更されません。

left の値は、オブジェクトの左端とブラウザ ウィンドウの左側の間の距離を表します。
right の値は、オブジェクトの右端とブラウザ ウィンドウの右側の間の距離を表します。ブラウザ ウィンドウ
両方が同時に存在する場合、左のみが有効になります。 ; どちらも指定されていない場合、その左側は元のドキュメント フローの位置と一致します。つまり、水平位置は変更されません。

Positoin 属性値が絶対値の場合、第 1 レベルの親オブジェクトがある場合 (それが親オブジェクトであっても、祖父母オブジェクトであっても、またはそれ以上のレベルであっても、すべてが同等に扱われます ^_^)、 Positoin 属性値が相対である場合、上記の相対的なブラウザ ウィンドウの位置は、相対的な親オブジェクトの位置になり、正確な位置を指定するのに非常に役立ちます。
CSS の詳細については、マニュアルを参照してください: /shouce/css/index.html
長年の努力が米国にとって良いことを願っています見落としがある場合は修正してください。