절대 위치에 있는 요소가 잘못된 위치에 나타나는 이유는 무엇입니까?

위치가 잘못된 요소: 절대 및 고정 위치 이해

CSS의 절대 및 고정 위치를 사용하면 문서 또는 뷰포트 내에 요소를 정확하게 배치할 수 있습니다. . 그러나 때로는 요소가 예상한 위치에 나타나지 않을 수도 있습니다. 이는 종종 이러한 위치 지정 방법의 작동 방식에 대한 오해로 인해 발생합니다.

정적 위치 지정 문제

요소가 정적으로 위치 지정되면(기본값) 흐름이 발생합니다. 문서의 나머지 부분과 함께 주변 요소의 위치를 ​​​​취합니다. 주어진 예에서 회색 상자 div는 절대 위치에 있습니다. 그러나 컨테이너에는 절대 위치나 고정 위치가 아닌 상대 위치가 있습니다. 이는 그레이박스가 여전히 문서 흐름의 영향을 받으며 컨테이너의 정적 위치를 기준으로 배치된다는 것을 의미합니다.

절대 및 고정 위치

절대 positioning은 문서의 흐름에서 요소를 제거하고 가장 가까운 위치의 조상을 기준으로 위치를 지정합니다. 배치된 조상이 없으면 문서 자체를 기준으로 배치됩니다. 고정 위치 지정은 절대 위치 지정과 유사하지만 상위 요소가 아닌 뷰포트를 기준으로 요소 위치를 지정합니다.

첫 번째 예에서 회색 상자는 절대 위치 지정되지만 해당 컨테이너는 정적으로 위치 지정됩니다. 앞에서 설명한 것처럼 이는 회색 상자가 왼쪽 상단이 아닌 컨테이너의 정적 위치를 기준으로 위치가 지정됨을 의미합니다.

두 번째 예에서 회색 상자는 오렌지박스. 이로 인해 회색 상자가 차지했던 공간을 주황색 상자가 차지하게 됩니다. 따라서 회색 상자는 주황색 상자 뒤에 나타납니다.

문제 수정

회색 상자를 올바르게 배치하려면 컨테이너를 절대 위치 또는 고정해야 합니다. . 이렇게 하면 회색 상자가 정적 위치가 아닌 컨테이너의 절대 또는 고정 위치를 기준으로 배치될 수 있습니다.

다음은 수정된 코드입니다.

.container {
  background: lightblue;
  position: absolute;
}

이제 회색- 예상대로 상자가 컨테이너의 왼쪽 상단에 나타나야 합니다.

위 내용은 절대 위치에 있는 요소가 잘못된 위치에 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!