Make a sub element overflow above an element with hidden overflow

Question

I have an element which has an overflow-x:hidden and overflow-y: visible and inside it an element with absolute position which I wish to overflow above it. I thought that if i give the parent element an overflow-y: hidden then it will work, but the browser simply adds a scroller rather then letting the sub element overflow the parent element.

Here's a fiddle that demonstrates my situation:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y: visible;
position: relative;
}
</style>
</head>
<body>

<div><p style="position: absolute;">
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' 
</p></div>

<p>Overflow-x specifies whether or not to clip the left/right edges of the content.</p>
<p>Overflow-y specifies whether or not to clip the top/bottom edges of the content.</p>

</body>
</html>

http://jsfiddle.net/QNDJj/

I'm not sure I understand what you are trying to achieve... Can you be a bit more specific? — Giovanni Silveira, Oct 14 '13 at 23:07
Actually, is [this](http://jsfiddle.net/QNDJj/1/) what you are trying to achieve? Sorry I'm not fully understanding what you mean :) — Giovanni Silveira, Oct 14 '13 at 23:08
I'm using this plugin http://swipejs.com for slideshows, it hides the slideshow divs by setting the wrapper's div overflow to hidden. Now in each slide I have an image with absolute position which I use in order to make the image overflow above the slide's y dimension. — Rami, Oct 14 '13 at 23:17
Then I'm afraid you are out of luck. You cant set `overflow` twice for the same element. If you set `-x` or `-y` to something other than `visible`, the other will be `auto` — Giovanni Silveira, Oct 14 '13 at 23:20
The only workaround you could get for that would be to create an additional `div` there, and then apply the different `overflow`s to the different `div`s... Check http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue for more details — Giovanni Silveira, Oct 14 '13 at 23:24
This workaround doesn't work for me. The image still doesn't pop above the slide. — Rami, Oct 14 '13 at 23:40

Make a sub element overflow above an element with hidden overflow

0 Answers0