position이란?
CSS에서 제공하는 position 속성은 웹 페이지 상에서 요소들을 배치하는 방법을 지정한다. 기본적으로 position 속성을 지정하고, top, bottom, left, right 속성 값으로 최종 배치할 자리를 결정한다.
position 속성의 종류들과, 각 특징 및 쓰임새를 알아보자.
position의 종류
static
position : static;position의 기본값이다. 모든 요소는 기본적으로 static으로 설정되어있다.
일반적인 흐름에 따라 요소를 배치한다. 요소가 원래 있어야할 곳에 있다!
position이 static 설정되어 있을 때는 top, bottom, left, right를 아무리 지정해도 효과가 없다.
relative
position : relative;relative 역시 일반적인 흐름에 따라 요소를 배치한다.
단 top, bottom, left, right를 지정해주면, 자신이 원래 있어야 할 위치를 기준으로 이동하여 배치된다.
absolute
position : absolute;absolute는 일반적인 흐름에서 해당 요소를 제거한다.
가장 가까운 포지셔닝된(position이 지정된) 요소를 기준으로, top, bottom, left, right를 지정해주면, 최종 배치된다.
조상 요소 중 포지셔닝된 것이 없다면 가장 바깥에 있는 컨테이닝 블록을 기준으로 배치된다.
그래서, 보통 어떤 요소에 absolute 값을 주고 싶다면, 기준이 되고자 하는 부모(혹은 조상) 요소에 relative 값을 지정한다.
fixed
position : fixed;fixed 역시 일반적인 흐름에서 해당 요소를 제거한다.
이름에서 알 수 있듯이, 사용자가 페이지 안에서 어떻게 움직이든, 그 자리에 고정되어 있다.
뷰포트(사용자 화면)의 초기 컨테이닝 블록을 기준으로, top, bottom, left, right를 지정해주면, 최종 배치된다.
header 부분을 fixed로 상단에 고정시켜 놓은 상태이다.
sticky
position : sticky;sticky 은 일반적인 흐름에 따라 요소를 배치한다.
absolute와 동일하게 가장 가까운 포지셔닝된(position이 지정된) 요소를 기준으로 배치된다.
특이한 점은, top, bottom, left, right를 지정해주면, 원래의 자리에 있다가 그 자리를 벗어나는 순간 지정해 준 위치에 끈적하게 달라붙어 있는다. 아래 gif를 보면 이해가 쉬울 것이다.
[링크 추가하기] 버튼을 sticky하게, top:0(맨 위) 값을 준 결과이다. 원래 자리에 있다가, 자기 자리를 벗어나면 top:0의 자리로 슬금슬금 찾아가서 붙어있는다.
position으로 적용할 수 있는 꿀팁
요소를 화면에 꽉차게 배치하기
어떤 요소를 화면에 꽉차게 하고 싶다면, absolute로 포지셔닝 한 뒤 top, bottom, left, right 값을 모두 0으로 주면 된다. 혹은 inset을 0으로 주는 방법도 있다.
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
--------같은 코드--------
position : absolute;
inset : 0z-index
x,y,z축 처럼 z-index는 요소들 간에 z축 순서를 정해준다. 포지셔닝 된 요소들 사이에만 z-index를 설정해줄 수 있다. 포지셔닝을 해야 쌓임맥락이 생성되기 때문이다. 예를 들어 1번 요소가 2번 요소보다 앞에 보이게 하고 싶을 때, z-index를 사용하여 순서를 배치해줄 수 있다. z-index도 관련한 내용이 굉장히 많기 때문에, 기회가 된다면 나중에 따로 자세히 정리하는 것으로 하겠다!
CSS 레이아웃은 항상 헷갈리는 부분 중 하나였는데, 이번 기회로 position에 대한 완벽한 숙지를 할 수 있었던 것 같다. 이제는 position을 자유자재로 사용할 수 있게 되었다~!!
정보 출처
