DIV内の1つの要素だけがオーバーフローする

Question

親のオーバーフローが隠されていても、DIV内の1つの要素のオーバーフローを許可する方法、CSSまたはJavaScriptはありますか？

私はoverflow: hiddenを使ってスライドを隠すjQueryスライダを書いています。

<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インデックスとオーバーフローが（500pxなどに、あなたはまた、単にテキストのdivの幅を設定することができます）に適用されていることを外観

Answer 3

を与えますあなたはこれを行うためにポジションアブソリュートを使うことができます。

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

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

位置が真でない場合、画像の余白を設定できます。