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

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

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

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

위치 계층 구조 이해

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

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

대체 위치 지정 기법

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

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