CSSの詳しい説明positioning_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSSの詳しい説明positioning_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:26:43

オリジナル

1177 人が閲覧しました

position 属性

フロントエンドでは、position は非常に一般的な属性です。この属性を使用して、ブラウザに表示される DOM 要素の位置を調整できます。

一般的に使用される属性がいくつかあります:

静的なデフォルト値。通常、絶対スタイルまたは相対スタイルをオーバーライドするときに使用されます。

相対的な相対位置。元の位置と比較して、他の要素のスタイルは変わりません。

position 絶対位置決め。絶対または相対を適用して最も近い親要素を基準にして、この要素を基準にして配置されます。

ブラウザの相対位置を修正しました。

inherit は親スタイルを継承します。

この中で、relative、position、fixed の方が分かりにくいのですが、その３つを紹介します。

relative

相対的な位置決めという意味らしいのですが、相対的な位置関係とは何でしょうか？実際、それは元の位置を基準にしています。たとえば、生徒が列に並んでいるとき、コーチはシャオミンに電話します。シャオミンはチームを離れ、一歩を踏み出しました。
これは次と同等です:

小明{ position:relative; 向前一步！}

ログイン後にコピー

図を見ると理解しやすいです。 3 つのスパンの元の位置は次のとおりです:

<html><body><span class="span-1" style="background-color:red;padding:10px;">1</span><span class="span-2" style="background-color:blue;padding:10px;">2</span><span class="span-3" style="background-color:green;padding:10px;">3</span></body></html>

ログイン後にコピー

2 番目のスパンに相対位置を追加すると、最初に 2 番目のスパンからオフセットされます。元の位置。

<html><head><style type="text/css">.span-2 {position:relative;top:10px;left:10px;}</style></head><body><span class="span-1" style="background-color:red;padding:10px;">1</span><span class="span-2" style="background-color:blue;padding:10px;">2</span><span class="span-3" style="background-color:green;padding:10px;">3</span></body></html>

ログイン後にコピー

absolute

この属性はより複雑です。属性の名前は絶対配置であるように見えますが、そうではありません。
これも相対的な配置ですが、それ自体に対する相対的なものではなく、親要素に対する相対的なものになります。特定の親要素は、position 属性が親要素に適用されているかどうかによって異なります。

たとえば、最初に 3 つのネストされた div があります

<html><head><style type="text/css"></style></head><body><div class="div-1" style="background-color:red;padding:10px;">1<div class="div-2" style="background-color:blue;padding:10px;">2<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3</div></div></div></body></html>

ログイン後にコピー

絶対位置が 3 番目の div に適用される場合、次の効果が表示されます:

<html><head><style type="text/css">.div-3 {position:absolute;right:0;top:0;}</style></head><body><div class="div-1" style="background-color:red;padding:10px;">1<div class="div-2" style="background-color:blue;padding:10px;">2<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3</div></div></div></body></html>

ログイン後にコピー

位置が div-1 に適用される場合相対または絶対的な場合、div-3 は div-1 を基準にして配置されます。

<html><head><style type="text/css">.div-1{position:relative;}.div-3 {position:absolute;right:0;top:0;}</style></head><body><div class="div-1" style="background-color:red;padding:10px;">1<div class="div-2" style="background-color:blue;padding:10px;">2<div class="div-3" style="background-color:green;padding:10px;width:20px;height:20px;">3</div></div></div></body></html>

ログイン後にコピー

このことから、親要素に位置スタイルが適用されていない場合、検索は html 要素まで上向きに継続されることがわかります。どちらも見つからない場合は、absolute が HTML に基づいて配置されます。逆に、absolute、relative、または fix を持つ親要素が見つかった場合は、この要素が最初に配置されます。