CSS+DIV 位置解析 (相対、絶対、静的、固定)_html/css_WEB-ITnose

CSS+DIV 位置分析 (相対、絶対、静的、固定)

CSS+DIV をレイアウトに使用する場合、位置の 4 つの属性値: 相対、絶対、静的、固定があまり明確ではないため、これは非常に憂鬱な結果につながる可能性があります。今日いろいろ調べて、ようやくわかったことがあります。ここで要約すると:

まず各属性値の定義を見てみましょう:

1. static: デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

2. 相対: 相対的に配置された要素を生成し、上、下、左、右の設定を通じて通常の位置を基準にして配置します。階層分類は、z-index を通じて実行できます。

3. 絶対: 絶対配置の要素を生成し、静的配置以外の最初の親要素を基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。

4. 修正: 絶対的に配置された要素を生成し、ブラウザー ウィンドウを基準にして配置します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。

静的および固定の位置決め方法は理解しやすいため、ここでは分析しません。以下は、より一般的に使用される相対アプリケーションと絶対アプリケーションの分析です。

1.相対的に配置された要素は通常のテキスト フローから削除されますが、テキスト フロー内のその位置はまだ存在します。図 1 に示すように:

図 1

背景が黄色のレイヤーは相対的に配置され、赤い枠線の領域は通常のフローでの位置です。上と左を通して配置した後、灰色の背景レイヤーの位置から、通常の位置がまだ存在していることがわかります。

2. 絶対。絶対として配置されたレイヤーは通常のテキスト フローから分離されますが、相対との違いは、通常のフロー内でのその位置が存在しなくなることです。図 2 に示すように:

図 2

黄色の背景レイヤーを絶対レイヤーとして配置した後、灰色の背景レイヤーが自動的に塗りつぶされることがわかります。

3. 相対と絶対の主な違い:

まず第一に、上記のように通常の流れの中での位置が存在するかどうかです。

第二に、相対的に配置されたレイヤーは、親要素がどのように配置されているかに関係なく、常に最も近い親要素に対して相対的になります。図 3 に示すように:

図 3

図では、赤色の背景レイヤーは相対的に配置され、その直接の親要素の緑色の背景レイヤーはデフォルトで静的に配置されています。赤い背景レイヤーの位置は、緑色の背景レイヤーに対して上と左の 20 要素です。赤い背景レイヤーが絶対として配置されている場合、状況は図 4 に示されているとおりです。要素は、絶対または相対的な黄色の背景レイヤーの配置方法に変更されます。したがって、絶対として配置されたレイヤーは常に、絶対または相対として定義された最も近い親レイヤーに対して相対的であり、この親レイヤーが必ずしも直接の親レイヤーであるとは限りません。親レイヤーで絶対または相対が定義されていない場合は、図 5 に示すようにボディに対して相対的に配置されます。 margin 属性値の も上記の規則に従います。

この記事は以下から転載されています: