Position

Positionは名前によってTagの位置を決定するCSS属性である.
Position属性には4つの値を含めることができます.

static

すべてのラベルは最初はposition:staticです.ステータス.
デフォルトではstaticがデフォルトなので省略します.左から右、上から下へ積み重ねます.

<span>span1</span>
<span>span2</span>
<span>span3</span>
<div>div1</div>

relative

タグの位置を少し変えたい場合はposition:relativeを使用します.
top(上)、右(右)、bottom(下)、左(左)アトリビュートを使用して位置を調整できます.

#css 코드#

.top {
  position: relative;
  top: 5px;
  z-index: 1;
}
.right {
  position: relative;
  right: 5px;
}
.bottom {
  position: relative;
  bottom: 5px;
}
.left {
  position: relative;
  left: 5px;
}

トップラベルtop:5 pxをあげましたが、なぜ下に移動しますか?「正の相関」は、各方向に対してタグの内部に移動します.外に移動させたい場合は、5 pxではなく負数-5 pxを与えることができます.
また、#topは#leftの上にあることに注意してください.通常、タグが同じ位置にある場合、後ろに表示されるタグは熱位置に配置されます.ただし、z-indexプロパティは#topタグよりも高い値を与えるため、#leftタグよりも高い.
z-indexは、ラベルが重なるときに誰が上になるかを決定する属性です(デフォルトは0).top 1が与えられているので、他のラベルよりも位置が高い.

absolute

相対的に静止した状態を基準に所定の画素が移動すると、absoluteはposition:静的属性を持たない親を基準に移動する.親に位置がない場合は、一番上のラベル(body)を基準にします.

#css 코드#

#absolute {
  background: yellow;
  position: absolute;
  right: 0;
}

#parent {
  position: relative;
  width: 100px;
  height: 100px;
  background: skyblue;
}

#child {
  position: absolute;
  right: 0;
}

上記の例から見ると、absoluteは祖先ラベルにposition:相対的ではないため、bodyを基準に最も右側に接着されている.逆に、#childは祖先ラベル#parentはposition:relativeなので、それを基準に一番右側に貼ります.
注意)absoluteの場合、divでもwidth:100%ではありません.

fixed

位置決めは固定されています.

<div>
  <div id="fixed">fixed</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />

#css 코드#

#fixed {
  background: yellow;
  position: fixed;
  right: 0;
}

注意)fixedもabsoluteのようにdivがwidth:100%ではありません.