Only one element overflow in DIV

Question

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

I wrote a jQuery slider that hides slides using 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; } 

I need the image to overflow naturally.

Answer 1

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

 $('.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 }); 

Note:

• This does not affect the add / fields / borders, but is the main logic that you can use.
• Setting the width of the text equal to the width of the container only gives the appearance that overflow is applied (you can also just set the width of the text div to 500 pixels)

Answer 3

with the z-index declaration in css you can use the absolute position for this.

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

You can set the margin for the image if its position is incorrect;

Answer 4

You cannot set image popup with position: static

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