• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 절대위치 & 상대위치

position이란 HTML 요소가 배치되는 방식을 결정하는 속성입니다.

position의 속성값

포지션이라는 속성에는 총 다섯가지 속성값을 줄 수 있습니다.

• static(기본값)
• relative
• absolute
• fixed
• sticky

position에 어떠한 속성값을 입력했느냐에 따라, top, left, bottom, right 속성을 이용해 요소의 좌표값을 변경하는 방식이 달라집니다. 이 부분에 유의하여 position의 속성값을 하나씩 살펴보도록 하겠습니다.

position : static(기본값)

문서상 원래 있어야 하는 위치에 배치됩니다.

❗️**이때는 top, left, bottom, right 속성을 사용할 수 없습니다.** 즉, 위치 조정이 불가능한 기본 HTML 요소의 상태라고 생각하시면 됩니다.

position : relative

원래 있던 자리를 기준 으로 요소의 위치를 조정할 수 있습니다. top, left, bottom, right 속성 적용이 가능합니다.

position : absolute