position 프로퍼티란?

• position 프로퍼티는 요소의 위치를 정의합니다.

1)static

• static은 position 프로퍼티의 기본위치로 아무 프로퍼티를 지정하지 않았을때와 값이 같습니다.
• 부모요소내의 자식 요소로 존재할때는 부모 요소의 위치를 기준으로 배치가 됩니다.

.static-box{
	position: static;

2) relative

• position:relative를 이용하면 위치를 원하는곳으로 조절할 수 있습니다.

-html-

<span class="top">top</span>
<span class="right">right</span>
<span class="bottom">bottom</span>
<div class="left">left</div>

-css-

.top {
  position: relative;
  top: 5px;
}

.right {
  position: relative;
  right: 5px;
}

.bottom {
  position: relative;
  bottom: 5px;
}

.left {
  position: relative;
  left: 5px;
}

3) absolute

• absolute가 지정된 태그는 가장 가까이 있는 부모요소를 기준으로 top, bottom, left, right라는 좌표프로퍼티를 이용하여 그만큼 이동합니다.

-html-

<div id="parent">
  <div id="child">children</div>
</div>

-css-

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

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

4) fixed

• fixed 프로퍼티는 스크롤을 내려도 항상 같은 위치에 있게 고정시키는 프로퍼티입니다.

-html-

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

-css-

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