CSS overflow hidden with absolute position

前端未结

关注

 3  1828

I\'ve been banging my head on this one. 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 clipp

相关标签:

3条回答

醉梦人生

2020-11-30 04:17

Move the position absolute to the image, then add the relative to the parent container. Worked for me in a similar situation.

<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: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

0 讨论(0)

生来不讨喜

2020-11-30 04:19

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

0 讨论(0)

不知归路

2020-11-30 04:21

Since the image's container is positioned absolutely, it is outside of the flow of the "containing" div.

Your choices are to either position relatively or to adjust the dimensions of the absolutely-positioned div, dynamically, with jQuery.

0 讨论(0)
发布评论:

提交评论
- 加载中...