절대 위치 지정이 중첩된 Div의 직계 부모로부터 상속되는 이유는 무엇입니까?

절대 절대 위치 이상

절대 위치 지정이 포함된 다층 레이아웃에서는 내부 div가 절대 위치를 갖는 시나리오를 접하는 것이 일반적입니다. 다른 div 내에서도 절대적으로 위치하는 직계 상위 항목을 기준으로 위치를 지정합니다. 그러나 이러한 설정에서는 내부 div가 직계 상위로부터 절대 위치를 상속하므로 예상치 못한 동작이 발생합니다.

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

<code class="html"><div id="1st" style="position: relative;">
  <div id="2nd" style="position: absolute;">
    <div id="3rd" style="position: absolute;"></div>
  </div>
</div></code>

직관적으로 #2가 #1st 내에 절대적으로 위치하므로 #3rd의 위치는 #1st에 상대적인 절대적 위치가 될 것으로 예상합니다. 그러나 현실은 #3rd의 절대 위치 지정이 #2nd에서 상속된다는 것입니다. 이는 #2nd의 position:absolute가 상위 항목을 기준으로 위치를 재설정하여 #3rd가 #2nd 내에서 절대적으로 위치하게 되기 때문입니다.

이 동작은 CSS 특수성 규칙에 기인할 수 있습니다. 하위 요소에 절대 위치가 있는 경우 해당 위치는 직계 상위 요소의 경계 상자에 의해 결정됩니다. 이 경우 #3rd의 위치는 #2nd의 경계 상자에 의해 정의되며 #1st에 대한 #2nd의 절대 위치를 인식하지 못합니다.

이 문제를 해결하려면 #3rd를 상대적으로 절대적 위치에 두십시오. #1st에게 #3rd를 #1st의 직계 자식으로 만드는 것이 필요합니다. 즉, 다음 HTML은 원하는 동작을 가져옵니다.

<code class="html"><div id="1st" style="position: relative;">
  <div id="3rd" style="position: absolute;"></div>
</div></code>

이 경우 #3rd의 절대 위치는 부모 #1st의 위치에 따라 결정됩니다. 이는 예상되는 것입니다. position:absolute를 통해 상위 요소의 위치를 ​​재설정하면 다른 상위 요소를 기준으로 절대 위치가 지정되지 않는 한 하위 요소의 위치 지정에도 영향을 미친다는 점에 유의하는 것이 중요합니다.

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