Menu
<div id="parent" style="overflow:hidden; position:relative;"> <div id="child" style="position:absolute;"> </div> </div> I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible? parent element has position:relative; child element gets stripped as soon as it's out of it's parents borders.
(elements have additional css defined I just put style attributes for clearness)
811
Try adding position: relative to your outer div. This will position the image relative to that div (honoring the overflow style) instead of relative to the page.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
The opposite of the default visible is hidden. This literally hides any content that extends beyond the box. This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems.
It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.
See: http://jsfiddle.net/thirtydot/TFTnU/
HTML:
<div id="parent"> <div id="hideOverflow"> <div style="width:1000px;background:#ccc">sdfsd</div> </div> <div id="child">overflow "visible"</div> </div> CSS:
#parent { position:relative; background:red; width:100px; height:100px } #child { position:absolute; background:#f0f; width:300px; bottom: 0; left: 0 } #hideOverflow { overflow: hidden } #parent { position: relative; background: red; width: 100px; height: 100px } #child { position: absolute; background: #f0f; width: 300px; bottom: 0; left: 0 } #hideOverflow { overflow: hidden }<div id="parent"> <div id="hideOverflow"> <div style="width:1000px;background:#ccc">sdfsd</div> </div> <div id="child">overflow "visible"</div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
