position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정한다. position을 이용해 부모 엘리먼트에 구애받지 않고 엘리먼트를 자유롭게 배치시킬 수 있다.
기본값은 static이며 relative나 absolute, fixed 등으로 변경이 가능하다.
position 속성을 static이 아닌 다른 값으로 설정했을 때, 함께 사용하는 포지셔닝 관련 CSS 속성이 있다. 대표적으로 top, left, bottom, right 등이 있는데, 웹페이지 상에서 엘리먼트의 오프셋(offset)을 지정하기 위해 사용된다.
static: 요소를 문서 흐름에 맞추어 배치relative: 이전 요소(주로 부모요소)에 자연스럽게 연결하여 위치를 지정absolute: 원하는 위치를 지정해 배치fixed: 지정한 위치에 고정하여 배치sticky: 위치에 따라 동작 방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에는 relative와 같이 동작하고, 그 이후에는 fixed와 같이 동작.
relative로 설정할 경우, 부모 요소에 대해서 상대적으로 부모를 기준으로 위치가 정해진다.
absolute로 설정할 경우, position 속성이 relative, absolute, fixed인 부모 요소 중 가장 가까운 요소를 기준으로 배치를 하게 된다. 부모와의 관계성이 끊기기 때문에 자신의 크기는 자신의 컨텐츠 크기만해진다. 따라서 width와 height 값을 정하지 않으면 자신의 컨텐츠만큼의 크기만큼만 공간을 차지하게 된다.
fixed로 설정할 경우, 위치가 고정된다. absolute와 비슷하게 width와 height값을 지정하지 않으면 자신틔 컨텐츠만큼의 크기만큼만 공간을 차지하게 된다.
💡 요약
position 속성은 엘리먼트가 화면에 어떻게 배치되는가를 결정하는 속성이다. 기본값은static이고,relative,absolute,fixed로 속성값을 변경할 수 있다.static이 아닌 다른 속성값으로 지정할 경우, 포지셔닝 관련 css인top,bottom,left,right과 함께 사용하게 된다.position이 아무것도 설정되어 있지 않으면 기본값인
static상태가 된다.
relative로 값을 변경하면 부모를 기준으로 위치가 정해지게 된다.
absolute와fixed로 값을 변경하면 부모와의 관계가 끊기기 때문에 엘리먼트의 부피가 자신의 컨텐츠 크기만해지며 부모 요소는 자식을 없는 셈 치게 된다. 또한, position 속성이relative인 부모 요소 중 가장 가까운 부모요소를 기준으로 배치가 된다. 만약relative속성을 가진 부모 요소가 존재하지 않을 경우, 가장 바깥인 브라우저 창을 기준으로 배치된다.
