CSS 포지션 (position) 속성이란?

CSS 포지션 (position) 속성이란?

HTML 요소가 어떻게 위치할지에 대한 속성이다. top, right, bottom, left 프로퍼티가 최종 위치를 결정한다.

position 의 종류 알아보기

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

위는 position 속성의 값으로 들어올 수 있는 모든 케이스를 적어둔 것이다.

static

• 기본적인 엘리먼트 배치 원리를 따른다.
• 요소가 차지하도록 공간을 비워둔다.

position 을 설정하지 않았을 때의 기본 값이다. top, right, bottom, left, z-index 와 같은 속성이 동작하지 않는다.

예제

position: static;
/* top, left 등은 동작하지 않는다. */
top: 40px;
left: 40px;

relative

• 마찬가지로 기본적인 엘리먼트 배치의 원리를 따른다.
• 요소가 차지하도록 공간을 비워둔다.

단, static 과 다르게 top, right, bottom, left, z-index 와 같은 속성이 동작한다. 요소가 차지하는 자리는 static 과 동일하다.

z-index 를 통해 요소를 쌓는 것도 가능하다.

table-*-group, table-row, table-column, table-cell, and table-caption 에 대한 효과는 정의되지 않았다.

예제

position: relative;
/* static 과 다르게 아래의 속성 값이 동작한다. */
top: 40px;
left: 10px;

absolute

• 기본적인 엘리먼트 배치 원리에서 벗어난다.
• static 혹은 relative 와 다르게 요소가 차지하도록 비워두는 공간이 없다.

가장 가까운 조상 엘리먼트에 따라 위치가 정해진다. 최종 위치는 top, right, bottom, left 속성 값에 의해 결정된다.

예제

position: absolute;
left: 30px;

fixed

• 기본적인 엘리먼트 배치 원리에서 벗어난다.
• 요소가 차지하도록 비워두는 공간이 없다.

뷰포트의 초기 컨테이닝 블록을 기준으로 위치가 정해진다. 조상 엘리먼트 중 하나가 CSS Transform Spec 에 있는 속성인 transform, perspective filter 프로퍼티 중 하나를 none 이외에 다른 값으로 설정하거나 will-change 프로퍼티를 transform 으로 설정한다면, 뷰포트의 조상을 기준으로 위치가 정해진다. (뷰포트의 조상이 containing block이 된다.)

항상 요소를 겹치게 되며, 프린트된 문서에서는 매 페이지에서 위치가 같게 된다.

뷰포트란 화면에 보여지는 다각형 영역 (보통 직사각형) 을 이야기한다. 뷰포트 중 지금 당장 볼 수 있는 부분을 시각적 뷰포트 라고 부른다. 사용자가 화면을 확대하면 레이아웃 뷰포트는 변하지 않지만, 시각적 뷰포트는 변한다.

perspective 와 filter 는 브라우저에 따라 동작이 다르다는 것에 유의해야 한다.

sticky

• 기본적인 엘리먼트 배치 원리에 의해 위치가 정해진다.
• 요소가 차지하도록 공간을 비워둔다.

offset 은 스크롤이 가능한 가장 가까운 조상 엘리먼트에 상대적으로 정해진다. (table 과 관련된 엘리먼트도 포함된다.) offset 은 다른 엘리먼트의 위치에 영향을 미치지 않는다.

당연히 요소를 겹치게 된다. 스크롤링이 가능한 가장 가까운 엘리먼트에 달라붙기 때문에, 스크롤링 메커니즘은 갖고 있지만, 해당 요소가 실제로 스크롤링이 안되면서 가까운 조상이 스크롤이 가능한 경우에는 다른 동작을 보일 수 있다. (sticky 를 잘못된 조상에 붙이고 착각할 수 있다는 이야기이다.)

보충 설명

• 위치 지정이 가능한 요소는 static 을 제외한 다른 position 속성 값을 가진 요소이다.
• relative 는 원래의 위치에 상대적인 offset 이 더해지는 형태이다.
• 절대적 위치를 갖는 요소는 absolute 와 fixed 이다.

레퍼런스

MDN 공식 문서