Menu
I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:
<html> <body> <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> </div> </body> </html> So, I want the right edge of the logo to not display. Ideas?
422
Use overflow: hidden instead. Use overflow-x : scroll and overflow-y : hidden , or overflow: scroll hidden instead. Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
Chen Hui Jing notes that when you absolutely position a flex item, it's no longer part of the flex layout. Except… it kinda is a little bit. If you make the child position: absolute; but don't apply any top/right/bottom/left properties, then flexbox alignment will still apply to it.
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.
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.
Example:
<html> <body> <div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> </div> </body> </html> See it on JS Bin
193
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
