[CSS] position(relative, absolute, fixed)에 대한 간단 정리

 

🔖 position

 

레이아웃을 변경할 수 있는 방법 중 하나인 position을 알아보자.
position은 브라우저 내에서 컨텐츠를 둥둥 띄운다고 생각하면 된다.
그래서 간혹 그냥 모든 컨텐츠를 position으로 다 정렬해버리는 경우도 있는데.... 정말 필요한 경우가 아니라면 쓰지 않는 것이 좋다.
왜냐하면 그렇게 하게되면 유지보수 하는데 정말 귀찮고 힘들기 때문이다.
어차피 기본값은 컨텐츠가 왼쪽->오른쪽 그리고 위->아래로 정렬되기 때문에 그에 맞춰 다른 속성으로 정렬해주어도 충분한 경우가 많다.

static은 기본값(왼쪽->오른쪽, 위->아래)이라 생략하였다.

 

---

 

💡 모든 position 속성들은 top, left, right, bottom을 통해 위치하게 할 수 있다.

 

 

position: relative

요소의 기본값(static)으로 배치하기 때문에 기본값 그대로 컨텐츠가 자리 차지를 한다.
그러나 컨텐츠가 static일 때를 기준으로 위치를 변경해주고 싶을 때 top, left, right, bottom을 이용하면 쉽게 컨텐츠를 원하는 만큼 옮길 수 있다.

absolute의 시작 위치를 잡아주는 용도(부모 위치 기준)로 쓰이는 경우가 많다.

 

 

position: absolute

요소를 기본값의 문서 흐름에서 제거하고 페이지 레이아웃에서 자리 차지를 하지 않고 둥둥 떠있는 상태이다.
absolute는 static 속성을 갖고 있지 않은 부모를 기준으로 상대적으로 위치한다.
부모중에 position으로 위치한 요소가 없다면 body를 기준으로 한다.

💡 absolute를 먹인 요소가 block 요소일지라도 width: 100%가 아니다.

 

 

position: fixed

요소를 기본값의 문서 흐름에서 제거하고 페이지 레이아웃에서 자리 차지를 하지 않고 둥둥 떠있는 상태이다.
스크롤을 내려도 항상 브라우저상의 그 위치에 고정 되어있다.
즉, 상위 요소에 영향 받지 않는다.

💡 fixed를 먹인 요소가 block 요소일지라도 width: 100%가 아니다.