TIL.06 Position in CSS

CSSのPosition Propertyを使用すると、htmlコードを考慮せずに任意の場所で要素を描画できます.
位置には5つの値があります.

static

relative

absolute

fixed

sticky:後で

について説明します

static

まずすべてのラベルは最初はposition:静的です.別に明記しなくても静態を保つ.
MDNイメージ

relative

上部、右側、下部、左側の値に基づいて位置を調整します.他の要因には影響しません.したがって、ページレイアウトでは、要素が占める空間は静的時と同じです.
通常、タグが同じ位置にある場合、後に表示されるタグはより高い位置に配置されます.z-indexプロパティを使用して、ラベルの前後を調整できます.

selector {
	position: relative;
	top: 40px; left: 40px;
}

MDNイメージ

absolute

相対的に静止した状態を基準に所定の画素が移動すると、absoluteはposition:静的属性を持たない親を基準に移動する.親に位置相対、絶対、固定のラベルがない場合は、一番上のラベル(body)を基準とします.次の例では親ラベルがないので、bodyに基づいて位置を決定します.absoluteに付与されるタグはblockタグですが、幅値は100%ではありません.

selector {
	position: absolute;
    	top: 40px; 
    	left: 40px;
}

MDNイメージ

fixed

fixedはタグを特定の位置に固定します.スクロールすると、その位置は変わりません.ブラウザウィンドウ(ビューポート)の左上隅を固定します.fixedもabsoluteのようにwidth:100%ではありません.

selector {
	position: absolute;
    	top: 40px; 
    	left: 40px;
}

sticky