DIV의 한 요소 만 오버플로

Question

부모 오버플로가 숨겨져 있어도 DIV의 한 요소가 오버플로되는 것을 허용하는 CSS 또는 JavaScript가 있습니까?

나는 슬라이드를 숨기는 jQuery 슬라이더를 overflow: hidden으로 작성했습니다.

<div class="container"> 
    <img src="image.jpg" /> 
    <div class="text"> 
     THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container 
    </div> 
</div> 

CSS의 :

.container{ 
    overflow:hidden; 
    position: relative; 
    width: 500px; height: 250px; 
} 

그래도 난 자연스럽게 오버플로 이미지가 필요합니다.

Answer 1

position: relative;을 제거해야합니다. overflow: hidden;과 같은 요소에 배치하면 요소가 숨겨집니다. 실제로 필요하다면, .container의 부모 (overflow: hidden을 가진 요소보다 트리에서 더 높게)에 배치하십시오.

jsFiddle Demo
Explanatory article

#wrap { position: relative; } 
 

 
.container{ 
 
    overflow:hidden; 
 
    width: 300px; height: 200px; 
 
    padding: 10px; 
 
    background-color: cyan; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 280px; left: 0; 
 
    border: 1px solid red; 
 
}

<div id="wrap"> 
 
    <div class="container"> 
 
    Container 
 
    <div class="text">Not hidden anymore when positioned outside of .container</div> 
 
    </div> 
 
</div>

Answer 2

jQuery를 예

$('.text').each(function(){ 
    var t = $(this);     // text div 
    var c = t.closest('.container'); // container parent 
    var i = c.children('img:first'); // container image 
    t.width(c.width());    // set text width = to container width 
    c.width(i.width());    // set container width = to text width 
}); 

참고

,

1. 이것은 패딩/여백/경계선을 적용하지 않지만 사용할 수있는 기본 논리입니다.
2. 컨테이너의 폭과 동일 텍스트 폭을 설정하는 것은 단지 그것을 선언 Z- 인덱스와 오버 플로우 (500 픽셀로 당신은 또한 단지 텍스트 DIV의 폭을 설정할 수)에 적용되는 모양

Answer 3

을 제공합니다 CSS에서는 position 절대 값을 사용하여이 작업을 수행 할 수 있습니다.

.container{ 
    z-index:900; 
    overflow:hidden; 
    width: 500px; 
    height: 250px; 
} 

.container img{ 
    z-index:920; 
    position:absolute; 
} 

위치가 참이 아닌 경우 이미지 여백을 설정할 수 있습니다.