ホームページ > 記事 > ウェブフロントエンド > CSSの詳しい説明positioning_html/css_WEB-ITnose
CSSの詳しい説明positioning_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:431140ブラウズ
position 属性
フロントエンドでは、position は非常に一般的な属性です。この属性を使用して、ブラウザに表示される DOM 要素の位置を調整できます。
一般的に使用される属性がいくつかあります:
この中で、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 を持つ親要素が見つかった場合は、この要素が最初に配置されます。
修正されました
これはわかりやすく、ブラウザウィンドウを基準にして配置されています。
例えば、この位置スタイルは、ブログガーデンのおすすめボタンやナビゲーションに適用できます。