절대적으로 배치된 내부 DIV가 외부 DIV를 절대적으로 배치하지 않고도 상위의 `overflow:hidden`을 존중할 수 있습니까?

외부 DIV의 절대 위치 지정 없이 위치 절대 복종 오버플로 숨겨진 중첩 DIV가 가능합니까?

두 개의 DIV가 중첩된 시나리오에서 , 외부 DIV가 정상적으로 위치하고 내부 DIV가 절대 위치에 있는 경우 내부 DIV는 오버플로 숨겨진 속성을 준수하지 않을 수 있습니다. 외부 DIV.

의도한 레이아웃을 방해할 수 있는 외부 DIV의 절대 위치 지정에 의존하지 않고 이 문제를 해결하려면 다음을 고려하십시오.

외부 DIV 및 절대에 대한 상대적 위치 내부 DIV

외부 DIV를 position:relative로 배치하고 내부 DIV를 다음과 같이 배치합니다. 위치: 절대. 이를 통해 내부 DIV는 상위 항목의 상대 위치를 상속하고 오버플로 숨겨진 속성을 따를 수 있습니다.

예제 코드:

#first {
    ...
    position: relative;
    overflow: hidden;
}

#second {
    ...
    position: absolute;
}

이 구성을 사용하면 내부 DIV가 DIV는 외부 DIV 내에 절대적으로 위치하며 오버플로 숨겨진 속성을 존중하여 오버플로를 효과적으로 숨깁니다. content.

참고: 내부 DIV가 테이블 셀(TD)에서 "확장"되어야 하는 경우 이 솔루션은 적합하지 않을 수 있습니다.

대체 옵션

내부 DIV에 대한 상대 위치가 옵션이 아닌 경우 CSS 클리핑 사용을 고려하세요. 기술. 외부 DIV에 대한 클리핑 경로를 만들고 이를 내부 DIV에 적용합니다. 이렇게 하면 내부 DIV가 외부 DIV의 경계를 넘어서 성장할 수 있으며 동시에 오버플로 경계도 존중됩니다.

예제 코드:

#outer-container {
    position: relative;
    width: 200px;
    height: 200px;
}

#inner-element {
    width: 400px;
    height: 400px;
    clip-path: path("M0 0 L 200 0 L 200 200 L 0 200 Z");
}

위 내용은 절대적으로 배치된 내부 DIV가 외부 DIV를 절대적으로 배치하지 않고도 상위의 `overflow:hidden`을 존중할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!