CSSで位置を配置する4つの方法まとめ

この記事では、CSS での position の位置決めの 4 つの方法について説明します 概要

1. すべての標準ドキュメント フローの staticpositioning (デフォルト ) 要素は次のとおりです。すべて静的に配置2. 相対配置

標準のドキュメントフローから逸脱しない、「ホームに穴を残して影を分離する」

特徴：相対配置が設定されている場合、

top 、 left

、

right、 bottom 属性が設定されている場合、ボックスは将来ボックスの元の位置からオフセットされます 相対位置の使用: 通常、「キャッピング」には使用されません。エフェクト」の機能は 2 つだけです: (1) 要素の微調整 (2)

絶対位置決めの参照

、子は父親と同じである必要があります

左と右を使用してオフセットを記述することができますボックスの右側と左側を使用して、ボックスの底部を記述することができます。

のオフセット。標準のドキュメント フローの外

の特徴: (1) この要素に親要素がない場合、将来的には、上、左、右、下がブラウザ ウィンドウに対して相対的に配置されます

スルーオーバーオーバーブラウジングウィンドウ

(3) 絶対位置の要素に親要素があり、その親要素が位置決め(非静的)を持つ場合、絶対位置の要素のオフセットはそれ自体の親要素に基づきます

(4 ) 要素絶対配置後はページ上の位置を占有しません

4. Position:fixed; 固定配置

標準のドキュメントフローからの脱却

固定配置の目的: ページ上のいくつかの小さな広告を修正する必要がありますページ上の 1 つの位置は変更されません

概要: 将来ページを作成するときに最も使用されるのは、絶対位置指定でも相対位置指定でもなく、絶対位置指定と相対位置指定を一緒に行うことです

仕様: 息子は次のことを行う必要があります。 (子要素は絶対配置を使用し、親要素は相対配置を使用します)

以上がCSSで位置を配置する4つの方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。