如何忽略父元素的溢出：隐藏在 css 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12013066/
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
How to ignore parent element's overflow:hidden in css
提问by John
I have a div element wrapping other div elements like so:
我有一个 div 元素包装其他 div 元素，如下所示：
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
我有其他 css 规则来管理外部 div 的尺寸。在我的实际代码中，我想将 div#a 定位在外部 div 下方 10 像素处。但是，我希望 div#b 仍然被外部 div 的溢出截断：隐藏。
What is the best way to achieve this?
实现这一目标的最佳方法是什么？
回答by parliament
Method 1
方法一
A good way to do it is by setting the overflowing element to position:fixed(which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
一个很好的方法是将溢出元素设置为position:fixed（这将使其忽略父溢出），然后使用以下技术将其相对于父元素定位：
?.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
一个警告是你不能在固定元素上设置任何顶部、右侧、左侧、底部属性（它们必须都是默认的“自动”）。如果您需要稍微调整位置，您可以使用正/负边距来代替。
Method 2
方法二
Another trick I recently discovered is to keep the overflow:hiddenelement with position:staticand position the overriding element relative to a higher parent (rather than the overflow:hiddenparent). Like so:
我最近发现的另一个技巧是保持overflow:hidden元素与position:static覆盖元素相对于更高的父元素（而不是overflow:hidden父元素）并将其定位。像这样：
回答by Gustonez
CSS
CSS
<style type="text/css">
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
</style>
HTML
HTML
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
回答by Heidar
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
正如人们所说，元素必须呈现在父元素之外才能不被裁剪。但是您可以使用 JavaScript 来实现类似的概念，而无需更改您的实际标记：
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
然后传递要从其父项裁剪中排除的元素：
breakOverflow($('#exlude-me'));
