[CSS] CSS position(static, relative, absolute, fixed, sticky) 속성 파헤치기

목차

1. CSS에서 position 속성이란?
2. position 속성의 속성값들(static, relative, absolute, sticky, fixed)
3. 실습 예제

 

글 시작에 앞서...

 

이전에 CSS의 여러 가지 속성들에 대해 포스팅한 적이 있다. 이제까지는 레이아웃을 배치할 때 margin속성을 이용한 편법으로 실습을 진행했고 한계점을 느꼈다. 그래서 자주 쓰이는 display와 position 속성에 대해서는 나 스스로도 다시 공부할 필요성을 느껴 재정리하는 시간을 가지게 됐다.

 

 

 

1. CSS에서 position 속성이란??

 position과 display는 우리가 프론트엔드 프로그래밍을 할 때 레이아웃을 배치해줄 수 있는 가장 기본적이고 자주 쓰이는 속성들이다. position은 content(span, div등 태그들을 뜻함)의 위치를 조정해주고 display는 인라인과 블럭 요소끼리 자유롭게 변환해서 사용할 수 있게끔 해준다. 

Instagram 메인화면

Instagram메인화면을 예시로 우리는 위의 레이아웃을 구성하기 위해 크게 좌측의 이미지와 우측의 로그인 창을 블럭으로 구성해야 할 것이다. 또한 로그인 블럭 내에서도 몇 가지의 블럭으로 나뉠 것이다. 이럴 때 블럭간의 위치를 조정해줄 수 있는 역할을 하는 것이 position속성이다. 

 

 

2. position 속성의 속성값들(static, relative, absolute, sticky, fixed)

position 속성에는 대표적으로 5가지 속성이 있다. 속성값을 정하고 난 후에는 left, right, bottom, top속성을 이용해 위치를 지정한다.

여기서 left는 왼쪽으로 가는 것이 아닌 현재 블럭의 기준에서 왼쪽으로 멀어지겠다는 뜻으로 오른쪽으로 이동한다. 또한 기본적으로 position이 참고하는 좌표는 좌측 위쪽(top-left)를 기준으로 한다.

 

- static : default값으로 설정되는 속성값으로 상하좌우 속성을 이용해도 움직이지 않는 고정상태를 뜻한다.

 

- relative : 현재 블럭의 위치에서 상대적으로 움직인다. 

 

- absolute : 설정하려는 블럭에서 가장 가까운 블럭태그의 위치를 기준으로 움직인다. 

 

- sticky : 현재 창을 기준으로 본인의 위치를 절대적으로 유지한다.

 

- fixed : 블럭이 아닌 창의 전체 크기를 기준 좌표로 삼고 움직인다(좌측 위쪽). 

 

 

 

3. 실습 예제

 

 블럭을 설정하는 HTML코드와 CSS코드는 아래와 같다. 맨 아래의 relative 선택자에서 position을 absolute, fixed, sticky로 바꿔서 진행한 실습이니 참고. 

relative와 absolute는 위에서 설명한 그대로이지만 fixed와 sticky는 추가 설명이 필요하다. fixed는 우선 본인이 속해있는 블럭, 즉 노란색 배경 밖으로 나간 모습이다. 즉 전체 창을 기준으로 위치가 설정됐으며 스크롤을 내리거나 창을 줄여도 절대 위치를 고수하는 모습을 보여준다. sticky는 위치를 설정해도 본인의 현재 위치에서 스크롤을 움직여도 고정된 모습을 보이지만, 블럭내에서만 한정된다. 즉 fixed와 sticky의 차이점은 다음과 같다.

fixed -> 속해있는 블럭의 위치를 기준으로 하지 않고 전체 창을 기준으로 위치를 설정하고 창의 크기나 스크롤로 인해 위치가 바뀌어도 블럭은 고정된 상태로 유지.

sticky -> static과 마찬가지로 위치를 설정해도 블럭의 위치가 변하지 않으나 창을 줄이거나 스크롤을 움직였을 때는 그 위치를 고수함. 단 본인이 속한 블럭내에서 한정된다(실습에서는 노란 박스).