[CSS] position 속성

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성이다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을지를 결정할 수 있다.

 

position 속성 사용법

position: static / relative / absolute / fixed / sticky

static : 요소를 문서 흐름에 맞추어 배치

relative : 이전 요소 (주로 부모 요소)에 자연스럽게 연결하여 위치를 지정

absolute : 원하는 위치를 지정해 배치

fixed : 지정한 위치에 고정하여 배치

sticky : 위치에 따라 동작방식이 달라짐. 요소가 임계점 이전에는 relative와 같이 동작, 그 후에는 fixed와 같이 동작

 

*static은 top, right, bottom, left와 같은 속성을 사용할 수 없고 float 속성은 사용 가능함