javascript - DIV の要素を 1 つだけオーバーフローさせる

Question

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

を使用してスライドを非表示にする 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
解説記事

#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

css で z-index を宣言すると、絶対位置を使用してこれを行うことができます。

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

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

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

Answer 3

画像のポップオーバーを設定できませんposition: static

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

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

Answer 4

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. テキストの幅をコンテナーの幅と同じに設定すると、オーバーフローが適用されたように見えるだけです (テキスト div の幅を 500px に設定することもできます)。