CSS 상대 및 절대 위치 지정이 컨테이너 내 요소 배치를 어떻게 정확하게 제어할 수 있습니까?

컨테이너를 기준으로 요소 배치

웹 디자인에서는 내부 요소의 레이아웃을 정확하게 제어해야 하는 시나리오를 접하는 것이 일반적입니다. 그들의 컨테이너. CSS는 이를 달성하기 위해 강력한 위치 지정 옵션을 제공합니다.

상대 위치 지정 사용

위치: 상대 속성은 흐름에서 현재 위치를 기준으로 요소의 위치를 ​​지정합니다. 이는 요소가 흐름에서 제거되지만 원래 위치에 있는 것처럼 여전히 공간을 차지한다는 의미입니다. 그런 다음 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 사용하여 오프셋을 지정하여 위치를 조정할 수 있습니다.

절대 위치 지정 사용

보다 정확한 제어를 위해 위치: 절대를 사용하세요. . 이는 상위 컨테이너를 기준으로 요소를 배치합니다. 상위 요소에 position:relative 또는 position:absolute 세트가 있는 경우 요소는 브라우저 창 대신 해당 좌표를 사용합니다.

예

다음은 시연할 코드 예제입니다. 절대 위치 지정:

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

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

<div>
<p>이 예에서 #box div는 위에서 50px에 위치하며 상위 컨테이너인 #container의 왼쪽 가장자리에서 20px입니다. 컨테이너 자체는 하위 항목에 대한 위치 지정 컨텍스트를 설정하기 위해 position:relative로 설정됩니다.</p>
<p><strong>주요 고려 사항</strong></p>
<ul>
<li>
<strong>브라우저 간 호환성:</strong> 상대 및 절대 위치 지정은 모든 주요 분야에서 광범위하게 지원됩니다. 브라우저.</li>
<li>
<strong>Quirks 모드:</strong> Quirks 모드와 표준 모드 모두에서 작동합니다.</li>
<li>
<strong>청결함 및 사용자 정의:</strong> 핵 대신 위치 지정 속성을 사용합니다. , 코드는 깔끔하게 유지되며 맞춤설정이 더 쉽습니다.</li>
<li>
<strong>JavaScript 불필요함:</strong> 이러한 기술은 CSS만으로 달성할 수 있으므로 JavaScript가 필요하지 않습니다.</li>
</ul>
</div>

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