CSS プロパティ

postion 属性は、ページ レイアウト内の要素の位置と、周囲の要素に対するその要素の影響を定義します。この属性には、合計 5 つの値があります:

1. 位置: 静的
3. 位置: 絶対
5。
これら 5 つの値の応用について順番に説明します。 position: static
static は、position 属性のデフォルト値です。静的要素は通常のドキュメント フローに従い、上、下、左、右などの属性を無視します。

position:inherit

inherit value は、他の CSS プロパティの継承値と似ています。つまり、親要素の位置の値を継承します。

position:relative

relative 要素は通常のドキュメント フローに従うため、周囲の要素はその存在を無視しません。top、bottom、left、right およびその他の属性もサポートされます。 top、bottom、left、right およびその他の属性を使用して相対要素を相対的に配置する場合、その効果は margin 属性によって達成される効果と多少似ていますが、

異なる点は、

、

relative 要素の周囲の要素は、相対要素の移動。

positioning 属性を使用して相対要素が相対的に配置されていない場合、その要素は周囲の要素によって無視されないことに注意してください。ただし、positioning 属性を使用して配置した後は、周囲の要素は相対要素の移動を無視し、無視されます。相対要素はまだそこにあると考えてください。元の位置は移動されていません。例を使用して説明します。

<div style="position: relative">Im a relative element</div><div>Im a default element</div>

//相対要素の存在は無視されません

<div style="position: relative;top:10px">Im a relative element</div><div>Im a default element</div>

//相対要素の移動は無視されます position: ABSOLUTE

absolute 要素は通常の文書の流れから外れるため、周囲の要素はその存在を無視します

。絶対要素の表示属性が none に設定されているのと同じです。このとき、top、bottom、left、right などの属性を使用して、絶対要素を絶対的に配置できます。一般に、上または下、左または右の 2 つの属性が定義されます。

この絶対的な位置付けは相対的な位置付けと混同されやすいため、少し理解する必要があります。

たとえば、left:10px の位置指定を絶対要素に追加する場合、この left はどの要素を参照しますか?実際、この時点では、絶対要素の最初の親要素が上方向に検索され、親要素の位置値が存在する場合 (静的でない場合)、left:10px が親要素に従って配置されます。親要素の位置値が静的でない場合は、親要素の親要素の検索が続けられます。条件を満たす親要素がない場合は、最も外側のウィンドウに基づいて配置されます。

<div style="position: absolute">Im an absolute element</div><div>Im a default element</div>

//絶対要素の存在を直接無視します

position:fixed
fixed要素は通常のドキュメントフローから切り離されるため、絶対要素と非常によく似ており、周囲の要素からも無視されます。は、top、bottom、left、right 属性をサポートしていますが、この 2 つは依然として大きく異なります。
まず第一に、固定要素の位置はその親要素とは何の関係もありません。常に最も外側のウィンドウを基準にして配置されます。

第二に、固定要素はその名の通り、画面上の特定の位置に固定され、画面のスクロールによって消えることはありません。

z-index

なぜここで z-index 属性について言及するのでしょうか?これは、z-index 属性が位置指定された要素に対してのみ、つまり位置の値が絶対、相対、または固定の場合にのみ有効であるためです。まず、z-index とは何かを理解しましょう。

上の図から、z-index 値が要素の重なり順を表すことが簡単にわかります。値が大きいほど、表示順序が高くなります。

<div style="position: absolute;z-index:1">Im an absolute element</div><div style="position: fixed;z-index:2">Im a fixed element</div>

//固定要素の z-index は絶対要素の Z インデックスよりも高いため、前に表示されます

(より明確に見えるように背景を不透明にしました)。 z-index値が同じ場合に何が起こりますか？

<div style="position: absolute;z-index:1">Im an absolute element</div><div style="position: fixed;z-index:1">Im a fixed element</div>

//z-index 値は同じですが、固定要素として表示されます
したがって、z-index 値が同じ場合、後でロードされた要素が最初に表示されることがわかります。

z-index 属性に関しても、ツリー構造に従って上下の階層関係が分割され、子要素の階層順序は親要素のレベルに依存します。

例:

誰か A 要素 z-index: 1; その親要素 z-index: 100、

特定の B 要素 z-index: 100、

特定の C要素 z-index: 2; その親要素と A が同じ

の場合、ブラウザ内の A 要素の表示レベルは B 要素の表示レベルよりも高くなければなりません。 ;
参考: http://www.vanseodesign.com/css/css-positioning/
再版アドレス: http://segmentfault.com/a/1190000000467348

この記事があなたの研究に役立つと思われる場合、応援と励ましをお願いします。