부모가 상대적으로 위치하지 않는 한 절대 위치에 중첩된 DIV에서 Overflow:hidden이 작동하지 않는 이유는 무엇입니까?

절대 위치 지정 및 오버플로 숨겨진 수수께끼

중첩 DIV를 처리할 때 다음과 같은 경우 외부 DIV에 오버플로 숨겨진 속성을 적용하는 것이 어려울 수 있습니다. 절대적으로 위치하지 않습니다. 이는 오버플로 숨겨진 동작을 무시하고 절대적으로 위치하는 내부 DIV로 이어질 수 있습니다.

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

<div>
<p>여기서 #first에는 오버플로 숨겨진 속성이 있고 # 두 번째는 절대적으로 위치합니다. 이 시나리오에서 #second는 오버플로 숨겨진 제약 조건을 따르지 않습니다.</p>
<p>#first를 절대 위치로 설정하지 않고 이 문제를 해결하려면 다음 해결 방법을 고려하세요.</p>
<ol>
<li>
<p>Position #상대적으로 첫 번째:</p>
<pre class="brush:php;toolbar:false">#first {
  position: relative;
}

#두 번째 위치 유지 절대적으로:

#second {
  position: absolute;
}

이 구성을 사용하면 #second는 이제 #first의 오버플로 숨겨진 속성을 준수합니다. 이를 통해 내부 DIV가 오버플로 제약 조건을 준수하도록 보장하면서 원하는 레이아웃을 유지할 수 있습니다.