只溢出DIV中的一个元素

Question

是否有一种方法,CSS或JavaScript允许DIV中的一个元素溢出,即使其父级溢出被隐藏.

我写了一个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演示
解释性文章

#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>