✍️ TIL 12 ㆍ CSS 속성 - position

1. position : static
2. position : relative
3. position : absolute
4. position : fixed

1. static

모든 태그들의 기본값.
순서는 왼쪽 -> 오른쪽 / 위 -> 아래

2. relative

static을 기준으로 태그의 위치를 살짝 변경하고 싶을 때 사용한다.
단, top, bottom, left, right과 같은 속성 중 최소 1개 이상과 함께 사용한다.

<코드 예시>

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

3. absolute

특정 부모에 대해 절대적인 위치에 둘 수 있다.
부모 중 position이 relative, absolute, fixed 중 하나라도 존재하면 그 부모에 대해 절대적이다.

<코드 예시>

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

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

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

위 코드에서 absolute는 부모 태그 중 "postion: relative" 인 것이 없기 때문에 body를 기준으로 가장 오른쪽으로 위치하게 된다.

반면 #child는 부모 태그인 #parent가 "position: relative" 이기 때문에 그것을 기준으로 가장 오른쪽으로 위치하게 된다.

<실행화면>

4. fixed

fixed를 사용하면 스크롤을 내려도 항상 그 자리에 위치하게 된다.
주로 웹페이지에서 상단바나 사이드바를 고정시키는 데 사용된다.

<코드 예시>

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

<실행화면>