상대적 위치 요소 내의 절대 위치 요소가 직계 상위 요소로부터 위치를 상속받는 이유는 무엇입니까?

상대 위치 지정 내 절대 위치 지정: 계층 구조가 중요한 이유

HTML에서 요소 위치 지정은 CSS 위치 지정 속성에 의해 결정됩니다. 요소에 절대 위치 지정이 할당되면 문서의 일반 흐름에서 제거되고 대신 위치: 절대 또는 위치: 상대를 사용하여 가장 가까운 조상을 기준으로 해당 위치가 정의됩니다.

질문:

다음 HTML 구조를 고려하세요.

<div id="1st">
  <div id="2nd">
    <div id="3rd"></div>
  </div>
</div>

첫 번째 div에 위치: 상대가 있으면 두 번째 div에도 위치: 절대가 있고 세 번째 div에도 위치: 절대가 있습니다. , 세 번째 div가 첫 번째 div가 아닌 두 번째 div를 기준으로 절대적으로 위치하는 이유는 무엇입니까?

답변:

이 동작을 이해하는 열쇠는 절대적인 방식에 있습니다. 위치 지정은 하위 요소의 위치에 영향을 미칩니다.

요소가 절대 위치 지정되면 해당 요소에 포함된 모든 하위 요소도 해당 하위 요소에 고유한 절대 위치 지정이 있더라도 해당 요소를 기준으로 절대 위치가 지정됩니다. 이는 절대 위치 지정이 하위 요소의 기본 상대 위치 지정을 효과적으로 재설정하기 때문입니다.

이 예에서 두 번째 div의 위치는 절대이므로 세 번째 div는 두 번째 div를 기준으로 절대 위치가 지정됩니다. 첫 번째 div의 절대 위치 지정(위치: 상대 포함)은 세 번째 div의 직접적인 조상이 아니기 때문에 세 번째 div의 위치 지정에 영향을 주지 않습니다.

세 번째 div를 갖는 원하는 동작을 달성하려면 div가 첫 번째 div를 기준으로 절대 위치에 있는 경우 두 번째 div에서 절대 위치 지정을 제거하고 세 번째 div를 첫 번째 div의 직계 하위로 만들어야 합니다.

<div id="1st">
  <div id="3rd"></div>
</div>

위 내용은 상대적 위치 요소 내의 절대 위치 요소가 직계 상위 요소로부터 위치를 상속받는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!