绝对位置隐藏CSS溢出 [英] CSS overflow hidden with absolute position

查看:136
本文介绍了绝对位置隐藏CSS溢出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在敲我的头。我想要绝对位置一个图像,我将在一个div中移动,并希望任何延伸到div外面被剪辑。下面是一个问题的例子:

 < 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;>在图像顶部。
< 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>

所以,我想要徽标的右边缘不显示。想法?

解决方案

由于图像的容器是绝对定位的,所以它位于包含 p>

您的选择是相对定位或使用jQuery动态调整绝对定位的div的尺寸。


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 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?

解决方案

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.

这篇关于绝对位置隐藏CSS溢出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆