[CSS] position 속성

position 이란?

 

요소의 배치를 지정할 때 사용하는 속성으로 static, relative, absolute, fixed 대표적으로 4가지가 주로 사용됩니다.

---

static

 

기본값(default)으로 position을 따로 설정하지 않을 때 갖는 설정값으로 상단, 왼쪽으로 배치됩니다.
top, right, bottom, left 와 같은 속성을 사용할 수 없습니다.

---

relative

 

static(기본값)의 값을 기준으로 위치를 잡습니다.

아래와 같은 속성값을 3개의 div 에 정의하고 div_3 클래스에만 left 속성을 부여하겠습니다. 

 

left 속성을 부여했지만 다른 점이 없는 이유는 position 속성이 부여되지 않아 기본값인 static 으로 설정 돼 left값을 사용할 수 없던 것입니다.

 

아래와 같이 div_3에 position: relative 속성을 주게 되면 left 속성이 적용 돼 왼쪽 여백이 생겨 div_3의 위치가 변경된 것을 확인할 수 있습니다.

---

absolute

 

가장 가까운 부모 혹은 조상 요소 중 position 속성이 relative인 요소를 기준으로 값이 변경됩니다.

relative 요소가 없다면 브라우저 상단, 왼쪽 값을 기준으로 위치 값이 변경됩니다.

 

div_0이라는 부모를 갖는 div_1, 2, 3 중 div_3에만 top, left, position 값을 부여했습니다.

div_3에 position: absolute 값이 부여됐지만 부모 요소 중 relative 요소가 없기 때문에 브라우저 상단, 왼쪽 기준으로 위치가 배치된 것 확인할 수 있습니다(body에 기본 margin 값이 부여돼 있기 때문에 div_1과 동일한 높이에 있지 않고 margin 값이 무시된 상단, 왼쪽 기준으로 위치를 잡습니다)

 

아래와 같이 div_0 에 position: relative 속성을 주게 되면

 

body 에 포함된 div_0 을 부모로 삼아 기준을 잡고 위치를 변경합니다.

---

fixed

 

마우스 스크롤을 내려도 고정 돼 있는 사이드바를 생각하면 쉽습니다. 브라우저를 기준으로 위치를 잡습니다.

브라우저 기준으로 위치를 잡기 때문에 body의 margin 값을 무시해 상단, 왼쪽 기준으로 left 값이 지정됐습니다.

브라우저의 내용이 많아 스크롤이 생겨 마우스 스크롤을 내려도 해당 위치에 고정됩니다.