외부 DIV가 상대적으로 위치하지 않는 한 절대 위치의 내부 DIV에서 'overflow:hidden'이 작동하지 않는 이유는 무엇입니까?

위치 절대 및 오버플로 숨김

중첩된 DIV를 처리할 때 범위 내에서 내부 DIV의 표시를 제어하는 ​​것이 어려울 수 있습니다. 특히 오버플로 숨김과 같은 속성을 사용할 때 외부 DIV의 이 질문은 외부 DIV가 절대 위치에 있지 않아 절대 위치에 있는 내부 DIV가 외부 DIV의 오버플로 숨겨진 지시문을 무시하게 되는 특정 시나리오를 조사합니다.

이 문제를 해결하기 위해 제안된 솔루션에는 위치 지정 변경이 포함됩니다. 외부 DIV의 위치를 ​​상대적으로 유지하고 내부 DIV의 절대 위치를 유지합니다. 작동 방식은 다음과 같습니다.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    position: relative;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

외부 DIV를 position:relative로 설정하면 해당 요소 내에 내부 DIV 위치에 대한 참조점 역할을 하는 새로운 좌표계가 설정됩니다. 이를 통해 내부 DIV는 외부 DIV의 오버플로 숨겨진 제약 조건을 준수하면서 외부 DIV에 고정된 상태를 유지할 수 있습니다. 이 구성에서는 내부 DIV의 콘텐츠가 외부 DIV의 경계 내에서 잘립니다.

또는 내부 DIV에 대해 position:fixed 사용을 고려할 수도 있습니다. 그러면 뷰포트를 기준으로 위치가 고정됩니다. 외부 DIV보다 이 접근 방식을 사용하면 내부 DIV 배치를 더욱 효과적으로 제어할 수 있으며, 특히 외부 DIV 경계 외부에 DIV를 배치해야 하는 경우 더욱 그렇습니다.

위 내용은 외부 DIV가 상대적으로 위치하지 않는 한 절대 위치의 내부 DIV에서 'overflow:hidden'이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!