CSSの立場:絶対的かつ相対的な詳細な説明

管理者 · 掲載地 2014/10/30 14:39:28

このプロパティ値を絶対に設定すると、オブジェクトは通常のドキュメントフローの絶対位置から引きずり出され、周囲のコンテンツのレイアウトに関わらずそうなります。異なるzインデックスを持つ他の物体がすでにある位置を占めている場合、それらは互いに影響を及ぼさず、同じ位置で重なり合います。対象には外側のパッチ(マージン)はありませんが、内側のパッチ(パット)とボーダー(ボーダー)があります。
オブジェクトの絶対位置を有効にするには、少なくとも左、右、上、下の属性のうち1つを指定し、この属性値を絶対に設定する必要があります。そうしないと、上記の属性はデフォルト値を自動的に使い、オブジェクトは通常のHTMLレイアウトルールに従い、前のオブジェクトの直後にレンダリングされます。

TRBL属性(TOP, RIGHT, BOTTOM, LEFT)は、位置属性が設定されている場合のみ有効です。
position:absolute を決めるべきです
もし親(無限)が位置属性を設定していない場合、現在の絶対値とブラウザの左上にあるTRBL属性を元の点として配置します
もし親(無限)が位置の性質を設定するなら、現在の絶対値はTRBLの性質と組み合わせて親(最近)の左上隅に元の点として配置されます。

位置設定時:相対的
親(最近の)コンテンツエリアの左上隅は元の点とTRBL属性(または親コンテンツ領域内の配置された要素の前の要素に対するオフセット)を組み合わせたものであり、BODYの左上隅は親を含まない元の点です。相対的な位置は重ねることができません。相対位置を使う場合、要素は移動したかどうかに関わらず元の空間を占有します。したがって、要素を動かすと他のボックスが上書きされます。

一般的に、ウェブページが中央に置かれている場合、Absoluteを使う際にミスをしやすいです。なぜなら、ウェブページは常に解像度のサイズに合わせて自動的に適応しているのに対し、Absoluteはブラウザの左上隅を元のポイントとして使い、解像度の変化による位置は変わらないからです。時には、容器の上限と下部の関係を設定するためにz指数に頼る必要があり、値が大きいほど上限が高く、数値範囲は自然数となります。もちろん、親子関係はzインデックスで設定できず、子レベルは親の上下に設定しなければならないことに注意してください。

このプロパティ値を「relative」に設定すると、オブジェクトは通常のHTMLフローを維持できますが、前のオブジェクトに基づいて位置をオフセットできます。相対位置器に従うテキストやオブジェクトは、配置されるオブジェクトの自然な空間をカバーすることなく、それぞれの空間を占めます。これに対し、絶対位置のオブジェクトの後方のテキストやオブジェクトは、ターゲットオブジェクトが通常の文書フローから引き離される前に自然な空間を占めます。絶対位置決めオブジェクトをビューポートの外に置くと、スクロールバーが表示されます。相対的な位置決めオブジェクトをビューエリアの外に置くと、スクロールバーには表示されません。実際、ポジショニングの主な問題は、それぞれのポジショニングの意味を覚えることです。相対位置は、文書フローに対して「相対的に」位置する要素の初期位置であり、絶対位置は最新の要素に対して「相対的に」位置付けられた先祖要素のことです。

以下が追加要素です:

CSSの絶対的な位置(絶対的な)位置と相対的な位置は知っていますが、関連する効果を自分で書いたことはありません!
半日以上作業すれば、完成と見なせる! この二つの特徴のいくつかも理解できました!

概要は以下の通りです。

まずは次の層構造を見てみましょう

<body>

<div id=posi>

<div id=rel> このレイヤーはposition:relativeのみを適用します; スタイル </div>
<div id=abs> このレイヤーはposition:absoluteのみを適用します; スタイル </div>
<div id=ss> スタイルは適用しません<div>

</div>

</body>

1. 絶対的:席に座らない、相対的:地位を持つ!

例えば、上部構造:

id relのレイヤーは表示時に1行を占めます! その背後のABSレイヤーは次のラインにしか表示されません!
IDがABSのレイヤーが表示されると、その後ろのSSSのIDと重なります!

2. デフォルト(topなどと組み合わせて配置されていない)では、絶対層(絶対位置)は親層によって位置づけられます
例えば、上記のIDレイヤーがABSの場合、TOPと組み合わせて配置されていなければ、その表示位置は親POSIレイヤーと一致します(POSIは文書の左下にあり、左下にも表示されます)

3. 上、下、右、左などの属性を組み合わせる際、絶対的な位置(絶対位置)は窓を位置にし、相対的な位置は自分の占有率を基準にずらされます! 以下は以下の通りです。

<body>

<div id=posi>

<div id=ss> スタイルは適用しません<div>
<div id=rel> この層はposition:relativeを適用します; 下:30px; スタイル </div>
<div id=abs> このレイヤーはposition:absoluteのみを適用します; 下:30px; スタイル </div>

</div>

</body>

上記のコード:
id rel を持つ層は上に移動し、id SSS を持つ層と重なり合います
ID ABSのレイヤーは、窓から30ピクセル離れた位置に移動し、その窓を基準にします!

4. トップ、ボトム、ライト、レフトなどの属性を組み合わせる際、絶対的な位置決め(絶対位置)を親レイヤーの位置基準線に使いたい場合は、親レイヤーに絶対属性や相対属性を適用できます! 以下は以下の通りです。

<body>

<div id=posi style="position:relative">

<div id=rel> この層はposition:relativeを適用します; 下:30px; スタイル </div>
<div id=abs> このレイヤーはposition:absoluteのみを適用します; 下:30px; スタイル </div>

</div>

</body>

上記のコード:idはposiのレイヤーで、absolute属性も使えます!
IDは影響を受けないrelのレイヤーであり、ベースラインとして独自のプレースホルダーでオフセットされています!

IDがABSのレイヤーはPOSIレイヤーの下端を位置決め基準にしていますが、この時点でPOSIレイヤーの高さが30px未満の場合、ABSレイヤーはそれを認識できない可能性があります!

[CSS/DIV] CSSの立場:絶対的かつ相対的な詳細な説明

閲覧したセクション