CSS의 position 속성

CSS의 position 속성을 이용하면 웹페이지에서 요소가 배치되는 방법을 정의할 수 있다.

position 속성에 설정할 수 있는 값은 static, relative, absolute, fixed, sticky 가 있다.

 

static 외의 것들은 오프셋값을 적용할 수 있다.

오프셋은 CSS의 top, right, bottom, left 속성으로 기준위치에서 얼마나 떨어트릴지를 지정할 수 있다.

 

예를 들어 한 요소의 위치좌표가 (0,0) 일때 top: 40px; left: 60px; 로 지정 하면 (40,60)으로 이동한다.

 

1. static

문서 흐름에 따름 : O

오프셋, z-index 적용 가능 : X

 

position값을 따로 지정하지 않았을때 모든 요소는 static값으로 배치된다.

주변 요소나 상위 요소 등의 문서 흐름에 따라 배치되므로 임의로 위치를 지정할 수 있는 오프셋값과 z-index값이 영향을 주지 않는다.

 

 

2. relative

문서 흐름에 따름 : O

오프셋, z-index 적용 가능 : O

 

오프셋 적용이 가능한 static이라고 이해하면 쉽다.

 

static요소처럼 문서 흐름에 따라 자동으로 배치되지만 처음 배치된 위치를 기준으로 오프셋값과 z-index를 적용할 수 있다.

 

 

3. absolute

문서 흐름에 따름 : X

오프셋, z-index 적용 가능 : O

 

absolute는 HTML구조와 문서 흐름을 그대로 따라가지는 않는다. static보다는 조금 더 유동적으로 사용할 수 있다.

 

absolute가 적용된 요소는 static처럼 배치되지 않고 자신의 상위 요소중 배치 기준을 정할 요소를 찾는다. 이때 배치 기준이 되려면 position 속성이 static 외의 값으로 적용되어 있어야 한다.

만약 상위요소를 타고올라가도 기준이 될만한 요소를 찾지 못하면 최상위요소를 기준으로 한다.

See the Pen Untitled by PARKSEONGSU (@ahuiogadjfgo) on CodePen.

absolute 요소는 위치의 기준점을 잡기위해 상위요소를 찾는다.

가장 먼저 보이는 상위요소는 second 이지만 position속성이 static 값이므로 기준으로 두지 않는다.

이후 찾게되는 최상위요소인 first는 position 속성이 relative 이므로 first요소를 기준으로 위치가 정해지게 된다.

first요소를 기준으로 left: 30px과 bottom: 10px을 적용받아 좌측 하단에 위치하게 되었다.

 

 

4. fixed

문서 흐름에 따름 : X

오프셋, z-index 적용 가능 : O

viewport를 위치 기준으로 둠 : O

 

상위 요소중 기준이 될수있는 요소를 찾아 위치의 기준을 만든 absolute와 다르게 fixed는 기본적으로 viewport를 기준으로 두도록 되어있다. (유저의 브라우저를 기반으로 둠)

단, 상위요소중 하나가 transform, perspective, filter 속성이 none이 아니라면 해당 요소를 기준으로 삼는다. (브라우저마다 차이가 있음)

 

기준이 정해지면 오프셋값으로 위치를 지정한다. 지정된 위치는 스크롤을 움직여도 고정되어있게된다.

See the Pen Untitled by PARKSEONGSU (@ahuiogadjfgo) on CodePen.

※ position값을 fixed로 두고 오프셋값(top등)을 주지않으면 position값이 static일때의 위치에 고정된다.

스크롤을 내려도 고정되는 상단바 등에 사용된다.

 

5. sticky

문서 흐름에 따름 : O

오프셋, z-index 적용 가능 : O (스크롤시 고정위치를 지정)

viewport를 위치 기준으로 둠 : X (스크롤 가능한 요소를 기준으로 둠)

 

기본적으로는 문서 흐름에 따라 위치가 지정된다. 오프셋값이 초기 위치에 비해 너무 높지 않으면 static과 동일하게 배치된다.

오프셋은 스크롤 시 고정위치를 지정하게 되는데 스크롤이 발생하여 요소의 위치가 변하고 오프셋으로 지정한 위치 이상으로 벗어나려 하면 지정해둔 위치에 고정되는 방식으로 작동한다.

See the Pen CSS sticky test by PARKSEONGSU (@ahuiogadjfgo) on CodePen.

fixed값은 요소의 공간을 만들지 않는반면 sticky값은 초기에는 static과 같이 문서흐름에따른 위치에 존재해야하므로 공간을 만드는것을 알 수 있다. 이후 고정위치에 도달하면 sticky 요소는 자리를 벗어나 지정된 위치에 고정되고 해당자리는 빈공간으로 남아있게된다.