[CSS] position 속성 - HTML 요소 위치 제어하기

CSS의 position 속성은 요소의 위치를 배치하는데 사용되는 속성입니다. position 속성을 이용하면 텍스트나 이미지와 같은 특정 html 요소를 나란히 배치할 수도 있고 가로나 세로로 원하는 위치에 배치할 수도 있으며 경우에 따라서는 스크롤을 따라다니거나 화면 한 곳에 고정도 시킬 수 있습니다.

 

CSS position 속성 사용법

CSS position 속성값

• static : 기본적으로 설정되는 값으로, 요소를 문서의 흐름에 맞추어 배치합니다. 다른 위치 속성들과 달리 추가 속성을 사용하지 않습니다.
• relative : 이전 요소에 자연스럽게 연결하여 배치하되 상대적인 위치를 지정할 수 있습니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다.
• absolute : 요소를 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 상대적으로 배치합니다. 위치 지정 조상이 없을 경우에는 문서의 초기 컨테이너를 기준으로 배치됩니다.
• fixed : 요소를 뷰포트에 상대적으로 배치합니다. 스크롤되더라도 화면의 고정 위치에 요소가 표시됩니다.
• sticky : 요소가 스크롤되는 영역에 따라 상대적인 위치를 변경합니다. 스크롤 영역을 벗어나지 않는 한 일정 위치에 고정됩니다.

 

position static - 문서의 흐름대로 배치하기 (기본 값)

See the Pen position static by wjdxo513 (@wjdxo513) on CodePen.

 

static은 postion 속성의 기본값으로 나열한 순서로 html 요소들이 배치됩니다. 기본값이기에 position을 명시해주지 않아도 되며 위와 같이 차례대로 <span> 태그와 같이 inline 태그라면 왼쪽 -> 오른쪽으로 배치되고 <div>와 같이 block 태그라면 위->아래로 배치되며 때로는 top이나 right, bottom을 활용하여 좌우로 배치할 수도 있습니다.

 

 

position : relative - 문서의 흐름에 따라 상대적인 위치값으로 배치하기

See the Pen position : relative by wjdxo513 (@wjdxo513) on CodePen.

 

position:relative도 static과 마찬가지로 나열한 순서대로 html요소들이 배치되기는 하지만 top, right, bottom, left 속성을 사용하여 원래 있어야 할 좌표에서 html요소를 이동시킬 수 있다는 특징이 있습니다. 위의 예제를 보시면 파란색의. box2가 원래 있어야 할 위치를 기준으로 좌측과 아래로 50px씩 이동하여 표시되는 것을 보실 수 있습니다.

 

※ 참고로 좌표의 left값은 오른쪽으로 갈수록 커지고 top값은 아래로 갈수록 양수의 값으로 커집니다. 반대로 가려면 음수로 가거나 left -> right , top -> bottom 으로 변경하시면 됩니다.

 

 

position : absolute - 원하는 위치에 배치하기

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

position:absolute 속성을 사용하면 위의 예제처럼 문서의 흐름과는 상관없이 별도로 left, right, top, bottom 속성을 사용하여 원하는 위치에 요소를 배치할 수 있습니다. 이때 기준이 되는 위치는 position:relative를 가진 가장 가까운 부모요소나 조상요소입니다.

 

position : fixed가 궁금하시다면 아래 글을 참고해 주세요

[CSS] position : fixed 속성 - 특정 위치에 요소 고정시키기

[CSS] position : fixed 속성 - 특정 위치에 요소 고정시키기

 

 

position : static이 궁금하시다면 아래 글을 참고해 주세요

[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기

[CSS] position : sticky 속성 - 요소를 스크롤에 따라오게 만들기