Html 使用绝对位置隐藏的 CSS 溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3225102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS overflow hidden with absolute position
提问by David A
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:
我一直在敲我的头。我想绝对定位我将在 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;">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?
所以，我希望徽标的右边缘不显示。想法？
采纳答案by Brock Adams
Since the image's container is positioned absolutely, it is outside of the flow of the "containing" div.
由于图像的容器是绝对定位的，因此它位于“包含”div 的流之外。
Your choices are to either position relatively or to adjust the dimensions of the absolutely-positioned div, dynamically, with jQuery.
您的选择是相对定位或使用 jQuery 动态调整绝对定位 div 的尺寸。
回答by Brian Moeskau
Try adding position: relativeto your outer div. This will position the image relative to that div (honoring the overflow style) instead of relative to the page.
尝试添加position: relative到您的外部 div。这将相对于该 div（尊重溢出样式）而不是相对于页面定位图像。
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
在JS Bin上看到
回答by Christos Hrousis
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>
