[CSS] - position 속성

Position 속성

• css에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정
• 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용

1. position : static

• 기본값은 static
• HTML 문서상에서 원래 있어야할 위치에 배치
• top, left, bottom, right 속성값은 position 속성이 static일 때는 무시

2. position : relative

• 원래 위치를 기준으로 상대적으로 배치
• top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있음.

3. position : absolute

• 해당 요소는 배치 기준을 자신이 아닌 상위(부모) 요소에서 찾음.
• position 속성이 relative인 요소가 없다면, DOM 트리에 최상위에 있는 body 요소가 배치 기준이 됨.

4. position : fixed

• 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않음.
• fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면임.

5. position : sticky

• 브라우저 화면을 스크롤링할 때 효과가 나타남.