[CSS] position 속성: static, relative, absolute, fixed

position 속성: static, relative, absolute, fixed

• position 속성에는 static, relative, absolute, fixed, sticky이 있으며, 이 중 relative와 absolute가 많이 사용됨

1) static

• 기본 설정값으로 되어 있으며, 별도의 위치 지정 없이 웹 페이지 상의 흐름에 따라 해당 요소가 배치된다.

• ‘A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.’

2) relative

• 별도의 속성이 추가로 부여되기 전까지는 static과 동일하게 작동되며, 추가로 top, right, bottom, left 속성을 부여하여 위치로 조정할 수 있다.

• 이 때 다른 요소들의 위치에는 영향을 주지 않는다.
  (Other content will not be adjusted to fit into any gap left by the element.)

3) absolute

• 특정 부모에 대해 절대적인 위치에 배치할 수 있게 하는 것으로, 부모 요소의 position에 relative, fixed, absolute 중 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
• 특정 부모 요소가 지정되지 않았을 경우, body에 대해 적용된다.
• absolute 값을 갖게 되면 block element도 inline element 처럼 내용의 크기만큼의 너비를 갖게 된다.

4) fixed

• 브라우저 화면 내에서 스크롤해도 같은 위치에 특정 요소를 고정하기 위해 사용되는 값으로, relative같이 top, right, bottom, left 속성과 함께 사용되며, 부모 태그에 relative를 부여할 필요 없이 설정이 가능하다.