CSS에서 위치를 사용하는 방법

CSS의 위치 속성은 문서 흐름에서 요소의 위치를 ​​정의하는 데 사용됩니다. 가능한 값은 다음과 같습니다. 정적(기본값): 요소는 문서 흐름에서 일반적인 순서로 정렬됩니다. 상대: 요소를 원래 위치를 기준으로 특정 거리만큼 이동하지만 문서 흐름에는 여전히 남아 있습니다. 절대: 문서 흐름에서 요소를 제거하고 상위 요소 또는 루트 요소를 기준으로 위치를 지정합니다. 수정됨: 페이지를 스크롤해도 움직이지 않도록 브라우저 뷰포트의 요소를 수정했습니다.

CSS에서 위치 사용

위치 속성은 HTML 문서 흐름과 주변 요소 내에서 요소의 위치를 ​​정의합니다. 요소가 정적, 상대, 절대 또는 고정인지 여부를 지정할 수 있습니다.

1. 정적(기본값)

정적 위치 지정은 기본 위치 지정이며 요소는 문서 흐름에서 일반 공간을 차지합니다.

2. 상대

상대 위치 지정은 문서의 흐름에서 벗어나지 않고 요소를 원래 위치에서 일정 거리만큼 이동합니다.

3. 절대

절대 위치 지정은 문서 흐름에서 요소를 제거하고 상위 요소 또는 루트 요소를 기준으로 위치를 지정합니다.

4. 고정

고정 위치 지정은 브라우저 뷰포트의 요소를 고정하며 페이지를 스크롤하더라도 움직이지 않습니다.

Usage

위치 속성의 구문은 다음과 같습니다.

<code class="css">position: value;</code>

여기서 값은 다음 값 중 하나일 수 있습니다. 넉넉해요

• 아래 예에서는 div 요소를 오른쪽으로 상대적으로 10px 배치합니다.

<code class="css">div {
  position: relative;
  right: 10px;
}</code>

<code class="css">div {
  position: absolute;
  bottom: 0;
  right: 0;
}</code>