특정 태그가 오버플로:숨김을 무시하도록 만드는 방법은 무엇입니까?

특정 태그가 오버플로를 재정의하도록 허용하는 방법:숨김

컨테이너 내의 요소로 작업할 때 특정 태그를 재정의하려는 상황이 발생할 수 있습니다. 컨테이너의 경계를 벗어나는 요소로, 기본적으로 Overflow:hidden 속성을 재정의합니다. HTML과 CSS를 사용하여 이를 달성하는 방법은 다음과 같습니다.

특정 태그가 Overflow:hidden 규칙을 무시하도록 허용하려면 다른 상위 요소를 사용하여 오버플로되는 요소를 배치해야 합니다. 오버플로:숨김이 있는 컨테이너는 위치:정적을 가져야 하며, 오버플로되는 요소는 상위 부모를 기준으로 위치가 지정됩니다. 이 설정을 사용하면 오버플로된 요소가 컨테이너 내의 다른 요소에 영향을 주지 않고 상위 요소의 경계를 벗어날 수 있습니다.

다음 HTML 및 CSS 코드를 고려하세요.

<code class="html"><div class="relative-wrap">
    <div class="overflow-wrap">
        <div class="respect-overflow">
        </div>
        <div class="no-overflow">
        </div>
    </div>
</div></code>

<code class="css">.relative-wrap {
    position: relative;
}

.overflow-wrap {
    height: 250px;
    width: 250px;
    overflow: hidden;
    background: lightblue;
}

.respect-overflow {
    position: relative;
    top: 75px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: green;    
}
.no-overflow {
    position: absolute;
    top: 150px;
    left: 225px;
    height: 50px;
    width: 50px;
    background: red;
}</code>

이 예에서는 , .overflow-wrap div의 높이와 너비는 250px이고overflow:hidden은 경계 외부로 흘러나오는 모든 콘텐츠가 숨겨짐을 의미합니다. 그러나 절대적 위치에 있는 .no-overflow div는 위치 지정이 position:relative를 갖는 .relative-wrap div를 참조하므로 .overflow-wrap div 이상으로 확장될 수 있습니다. 한편 .overflow-wrap div에 상대적으로 위치하는 .respect-overflow div는 Overflow:hidden 규칙을 준수하고 그 경계 내에 포함됩니다.

이 기술을 사용하면 표시되는 요소를 만들 수 있습니다. 해당 컨테이너 내 다른 요소의 위치 지정 및 오버플로 속성에 영향을 주지 않고 컨테이너에서 빠져나옵니다.

위 내용은 특정 태그가 오버플로:숨김을 무시하도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!