[CSS] Position(static / relative / absolute / fixed / sticky)

Position 종류

1. static

2. relative

3. absolute

4. fixed

5. sticky

Position 속성은 도큐먼트(document) 에 요소를 배치하는 방법을 지정하고, top, right, bottom, left 속성들은 요소가 최종적으로 배치될 위치를 지정한다.

1. static

static은 position 속성 기본값으로, document의 일반적인 흐름을 따라 배치된다. top, bottom, left, right, z-index 속성들은 static에서 아무런 효과를 주지 못한다.

2. relative

relative은 상대적인 위치를 계산한다. top과 bottom 속성은 기본 위치로부터 수직 방향으로 얼만큼 떨어진 곳에 위치할 것인가를 설정하고, left와 right 속성은 기본 위치로부터 수평 방향으로 얼만큼 떨어진 곳에 위치할 것인가를 설정한다. 단, 별도의 거리 속성을 주지 않으면 static과 동일하게 동작한다.

3. absolute

absolute는 절대적인 위치를 계산한다. top, bottom, right, left 속성에 의해 위치가 결정된다.

4. fixed

fixed는 절대적인 위치를 계산한다. 스크린의 viewport를 기준으로 한 위치에 배치되기 때문에 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다. top, bottom, right, left 값에 의해 최종 위치가 결정된다.

5. sticky

해당 요소를 감싸고 있는 컨테이닝 블록이 지정된 임계값을 넘어서기 전까지는 relative로 작동하며 임계값을 넘기면 fixed로 작동한다.

실습

https://codepen.io/je_ss2/pen/mLWere

static 실습

relative 실습

absolute 실습

absolute 실습 - 스크롤 내렸을 때

fixed 실습

fixed 실습 - 스크롤 내렸을 때

sticky 실습

sticky실습 - 스크롤 내렸을 때