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>

다음 예에서는 div 요소를 페이지의 오른쪽 하단 모서리에 절대적으로 배치합니다.

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

참고:

위치 지정 속성이 있는 요소만 가능합니다. 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 설정합니다. 상대적으로 배치된 요소는 문서 흐름에서 공간을 차지하지만 절대적으로 배치된 요소는 그렇지 않습니다.

고정 위치 요소는 페이지 스크롤 시 이동하지 않지만 다른 요소 위치에 영향을 미칩니다.

위 내용은 CSS에서 위치를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!