[CSS] 포지션 속성 (position property)

css position 속성은 html요소의 위치를 결정합니다. 요소의 위치를 결정하는 방법에는 네가지 방법이 있습니다.

 

1. static position (정적 위치)

 

static position은 포지션 속성의 기본 값으로 아무것도 설정하지 않았을 때의 값과 같습니다. 왼쪽에서 오른쪽, 위에서 아래로 차례대로 위치됩니다. (top, bottom, left, right 속성에 영향을 받지 않습니다.)

 

2. relative position (상대 위치)

 

static position을 기준으로 top, bottom, left, right 속성을 이용해 이동하는 속성입니다.  여기서 top은 위로 이동한다는 뜻이 아니라 top:100px 이라면 위에서 100px 만큼 이동한다는 뜻입니다. bottom, left, right도 마찬가지입니다.

 

3. absolute position (절대 위치)

 

static position을 가지지 않은 부모 태그를 기준으로 움직입니다. 만약 그런 부모 태그가 존재하지 않는다면 html body를 기준으로 움직입니다.

 

4. fixed position (고정 위치)

 

fixed position 속성을 가진 요소는 스크롤의 영향을 받지 않고 고정되어 있습니다.