절대 위치 지정은 다른 절대 위치 지정 요소 내에 중첩된 경우 어떻게 작동합니까?

절대 위치 지정 내의 절대 위치

웹 페이지 레이아웃 작업 시 절대 위치 지정과 같은 위치 지정 기술을 사용하여 요소를 정확하게 배열하는 것이 일반적입니다. 페이지. 그러나 자체적으로 절대 위치가 지정되는 요소 내에서 절대 위치 지정을 적용하려고 하면 잠재적인 문제가 발생합니다.

상대 위치 지정(위치:상대)이 있는 컨테이너 요소(첫 번째 div)가 있다고 가정해 보겠습니다. 자체 위치를 기준으로 하위 요소를 배치합니다. 이 컨테이너 내에는 절대 위치 지정 요소(2번째 div)와 2번째 div 내에 중첩된 세 번째 절대 위치 지정 요소(3번째 div)가 있습니다.

이 시나리오에서는 3번째 div가 절대 위치 지정될 것으로 예상할 수 있습니다. 두 번째 div도 절대 위치에 있지만 첫 번째 div를 기준으로 합니다. 그러나 그렇지 않습니다.

위치 계층 이해

이러한 동작은 절대 위치 지정이 작동하는 방식에 있습니다. 요소에 절대 위치 지정이 지정되면 해당 요소는 문서의 일반 흐름에서 제거되고 대신 가장 가까운 위치의 조상을 기준으로 위치가 지정됩니다. 이 경우 첫 번째 div에도 상대 위치 지정이 있는지 여부에 관계없이 두 번째 div는 세 번째 div의 가장 가까운 위치에 있는 조상입니다.

이는 세 번째 div의 절대 위치가 두 번째 div를 기준으로 계산된다는 의미입니다. 첫 번째 div의 위치가 아닌 div의 위치입니다. 결과적으로 3번째 div는 1번째 div가 아닌 2번째 div 내에 절대 위치로 표시됩니다.

대체 위치 지정 기법

3번째 div를 원하는 경우 첫 번째 div를 기준으로 절대적으로 위치를 지정하려면 첫 번째 div의 직계 하위 항목으로 만들어야 합니다. 이렇게 하면 세 번째 div가 첫 번째 div의 절대 위치를 상속하고 그에 따라 위치를 지정할 수 있습니다.

position: Absolute는 position:relative와 마찬가지로 하위 항목의 상대 위치를 재설정한다는 점에 유의하는 것이 중요합니다. 따라서 상대적으로 배치된 상위 요소 내에 절대적으로 배치된 하위 요소가 여러 개 있는 경우 해당 위치는 가장 가까운 절대적으로 배치된 상위 요소를 기준으로 독립적으로 계산됩니다.

위 내용은 절대 위치 지정은 다른 절대 위치 지정 요소 내에 중첩된 경우 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!