CSS の位​​置決めにおける Positoin、絶対、および相対に関するいくつかの研究

Web サイトのレイアウトに Div+CSS を使用する場合、フローティング レイヤーなどの特殊効果を実行するときに CSS での位置の問題を考慮する必要があります。これには、Positoin 属性などを使用する必要があります。 CSS の配置に興味がある友人は、ぜひ見てみましょう。

Positoin 属性には、静的、固定、絶対、相対の 4 つの値があります。後の 2 つは、名前が示すように、絶対的な配置、つまりオブジェクトをドキュメント フローからドラッグすることを指します。 left、right、top、bottom などのプロパティを使用すると、絶対配置が実行され、そのカスケードは z-index プロパティを通じて定義されます。オブジェクトには余白がなくなりましたが、パディングと境界線はまだあります。相対的とは相対的な位置決めを指し、左、右、上、下、その他の属性に基づいて通常のドキュメント フロー内の位置をオフセットします。
しかし、絶対法則とは何で、相対法則とは何でしょうか？私はこれまで注意深く勉強したことがなく、特定のアプリケーションに関しては少し混乱することがあります。多くの友人もこの問題を抱えていると思います。今日私は特別にテストし、次の結論に達しました:

1. Positoin 属性値が Relative の場合 オブジェクトが占めていた元の位置が保持され、その背後にあるオブジェクトも元の位置に従ったままになります。ドキュメント フロー
Top の値は、元の位置に対するオブジェクトの下方向のオフセット距離を表します。 Bottom の値は、元の位置に対するオブジェクトの上方向のオフセット距離を表します。両方が同時に存在する場合は、Top のみが有効になります。 。

left の値は、オブジェクトが元の位置に対して右にシフトされる距離を表します。
right の値は、両方が同じ位置にある場合、オブジェクトが左にシフトされる距離を表します。時間が経てば、作品だけが残ります。


2. Positoin 属性値が絶対値の場合

オブジェクトがドキュメント ストリームから抽出され、元の位置が後続のオブジェクトによって置き換えられます
Top の値は、オブジェクトの上端と上端の間の距離を表しますブラウザ ウィンドウの上部 bottom この値は、オブジェクトの下の境界線とブラウザ ウィンドウの下部の間の距離を表します。両方が同時に存在する場合、両方が指定されていない場合は上部のみが機能します。元のドキュメント フローの位置と一貫性があります。つまり、垂直位置は変更されません。
left の値は、オブジェクトの左境界線とブラウザ ウィンドウの左側の間の距離を表します。
right の値は、オブジェクトの右境界線とブラウザ ウィンドウの右側の間の距離を表します。
両方の値が一致した場合両方が指定されていない場合は、左側のみが有効になります。その場合、その左側は元のドキュメント フローの位置と一致します。つまり、水平位置は変更されません。

Positoin 属性値が絶対値の場合、第 1 レベルの親オブジェクト (親オブジェクトであっても、祖父母オブジェクトであっても、それ以上のレベルであっても、すべて同等に扱われます^_^) と Positoin 属性値があれば、 [相対] の場合、上記の相対ブラウジング ブラウザ ウィンドウの位置は親オブジェクトに対して相対的になり、正確な位置を指定するのに非常に役立ちます。
CSS の詳細については、マニュアルを参照してください:
//m.sbmmt.com/xiazai/shouce/22



長い間苦労して出した結論、そうなるといいですねみんなの役に立つように。見落としがある場合は、修正してください。 関連する推奨事項:

CSS の配置位置とアプリケーション シナリオの例の分析

CSS の配置に関する 10 の推奨コース

CSS を使用して背景画像を配置する方法の概要

以上がCSS の位​​置決めにおける Positoin、絶対、および相対に関するいくつかの研究の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。