CSS 위치 지정이 컨테이너 내에서 상대 요소 배치를 어떻게 달성할 수 있습니까?

상대적 요소 배치를 위한 CSS 위치 지정

컨테이너의 왼쪽 상단 모서리를 기준으로 요소를 배치하는 크로스 브라우저, 표준 준수 및 유지 관리 가능한 방법에 대한 탐구 CSS 위치 지정을 통해 달성할 수 있습니다. 그 방법을 살펴보겠습니다:

상대 위치 지정

CSS 위치: 상대; 요소 자체를 기준으로 요소의 위치를 ​​설정합니다. 레이아웃 중에 일반 흐름을 유지한 다음 지정된 값만큼 오프셋됩니다. 주변의 다른 요소는 함께 이동하지 않습니다.

절대 위치 지정

위치: 절대; 컨테이너를 기준으로 요소를 배치합니다. 기본적으로 컨테이너는 브라우저 창입니다. 그러나 상위 요소에 위치: 상대 또는 위치: 절대 세트가 있는 경우 해당 하위 요소의 위치 지정 좌표에 대한 상위 요소가 됩니다.

예

다음 코드를 고려하세요.

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div>

이 예에서 #box는 #container 내에 절대적으로 위치합니다. 상단 가장자리는 컨테이너 상단에서 50px이고, 왼쪽 가장자리는 컨테이너 왼쪽에서 20px입니다.

위 내용은 CSS 위치 지정이 컨테이너 내에서 상대 요소 배치를 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!