overflow just one element in a DIV

Question

Is there a way, CSS or JavaScript to allow overflow of one element in a DIV, even if its parents overflow is hidden.

I've written a jQuery slider that hides slides by using overflow: hidden.

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

The CSS:

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

I need the image to overflow naturally though.

Answer 1

You should remove position: relative;. If you place it on the same element as overflow: hidden;, it will hide the element. If you really need it, try placing it on the parent of .container (higher in the tree than the element having 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>