절대 위치 지정 요소가 수평이 아닌 수직으로 쌓이는 이유는 무엇입니까?

수평이 아닌 수직으로 쌓이는 절대 요소

CSS에서 절대 위치 지정을 사용하여 요소를 배치하면 예상치 못한 쌓임 동작이 발생할 수 있습니다. 절대 요소가 나란히 쌓이지 않고 서로 위에 쌓이는 이유를 이해하기 위해 CSS 위치 지정의 기본 사항을 살펴보겠습니다.

상대 위치 지정과 절대 위치 지정

위치: 상대를 사용하여 요소의 위치를 ​​지정하면 일반적인 문서 흐름에서 해당 위치가 유지되지만 위쪽, 오른쪽, 아래쪽 또는 왼쪽 속성을 사용하여 이동할 수 있습니다. 상대 위치 지정이 있는 요소는 주변 요소의 레이아웃에 영향을 주지 않습니다.

반대로 position:absolute가 있는 요소는 문서 흐름에서 제거되고 포함 요소 또는 가장 가까운 위치의 상위 항목을 기준으로 위치가 지정됩니다. 절대 요소는 자체 공간을 차지하며 더 이상 흐름의 다른 요소와 상호 작용하지 않습니다.

예제에서

코드에서 #row1과 #row2는 모두 절대 요소를 갖습니다. 위치를 지정하여 문서 흐름과 독립적으로 만듭니다. 이러한 요소는 모두 절대 위치에 있는 .container의 하위 요소이므로 해당 요소를 기준으로 위치가 지정됩니다. #row1이 #row2 앞에 있기 때문에 그 위에 나타납니다.

문제 해결

#row1과 #row2를 세로로 표시하려면 제거해야 합니다. 이러한 요소의 절대 위치를 지정하고 이를 포함 요소인 .container에 적용합니다. 이를 통해 행은 수직으로 다른 요소 아래에 쌓이는 일반 블록 요소처럼 동작할 수 있습니다.

.container {
  position: absolute;
}

.row {
  position: static;
}

CSS 위치 이해

더 명확히 하기 위해 다른 요소를 살펴보겠습니다. CSS 위치 값:

• 정적: 요소는 그대로 유지됩니다. 일반적인 문서 흐름입니다.
• 상대: 요소는 흐름에서 위치를 유지하지만 위쪽, 오른쪽, 아래쪽 또는 왼쪽 속성을 사용하여 이동할 수 있습니다.
• 절대: 요소는 흐름에서 제거되고 포함된 요소 또는 가장 가까운 위치를 기준으로 배치됩니다.
• 고정: 요소가 흐름에서 제거되고 뷰포트를 기준으로 위치가 지정됩니다.

CSS 위치 지정 작동 방식을 이해하면 웹 페이지의 요소 레이아웃 및 스택.

위 내용은 절대 위치 지정 요소가 수평이 아닌 수직으로 쌓이는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!