CSS의 position 속성은 엘리먼트를 배치할 때 사용되는 속성으로, 엘리먼트의 위치를 지정하는 방법을 제어합니다. position 속성의 값에 따라 엘리먼트가 문서 흐름에서 벗어나거나 겹치는 것을 조정할 수 있습니다.

position 속성 값

position 속성은 다음과 같은 값들을 갖을 수 있습니다:

• static: 엘리먼트가 일반 문서 흐름에 따라 배치됩니다. 이 값은 보통 별도로 지정하지 않아도 기본값으로 적용됩니다.
• relative: 엘리먼트가 일반 문서 흐름에 따라 배치되지만, 다른 엘리먼트를 기준으로 상대적으로 위치가 조정됩니다.
• absolute: 엘리먼트가 문서 흐름에서 벗어나고 가장 가까운 위치 지정된 조상 엘리먼트를 기준으로 위치가 지정됩니다.
• fixed: 엘리먼트가 뷰포트에 상대적으로 위치가 지정되며 스크롤에 영향을 받지 않습니다.

예제

.element {
  position: relative;
  top: 20px;
  left: 30px;
}

위의 CSS 코드에서 position: relative;은 엘리먼트를 일반 문서 흐름에 따라 배치하면서 top과 left 속성을 사용하여 다른 엘리먼트를 기준으로 상대적인 위치를 지정하고 있습니다.

position 속성은 웹 디자인에서 중요한 역할을 담당하며, 올바른 사용은 페이지 레이아웃과 배치를 효과적으로 제어하는 데 도움이 됩니다.

이상으로 position 속성에 대한 간단한 내용을 공유드렸습니다. 더 자세한 내용은 MDN Web Docs에서 확인하실 수 있습니다.