CSS 忽略溢出：隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7074114/
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 ignore overflow: hidden
提问by Marty
I'm working on the navigation for this websiteand am having trouble with the dropdown nav.
Basically, I have overflow: hiddenapplied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.
基本上，我已经overflow: hidden应用到包含导航项的容器，以便翻转效果正常工作（导航项的底部被“屏蔽”掉）；如果您翻阅网站上的导航，您就会明白我的意思。
For Productsthere is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.
对于产品，有一个下拉导航。作为内置 Business Catalyst (CMS) 的站点，我无法控制导航项的嵌套方式，但我显然可以使用 JQuery 设置它们的样式/定位它们。
Is there a way to make the dropdown container within div#navigationignore the overflow: hiddenrule I have applied? I have tried setting positionto absoluteand playing with the z-index, but no luck.
有没有办法让下拉容器div#navigation忽略overflow: hidden我应用的规则？我曾尝试设置position为absolute并使用z-index，但没有运气。
Any suggestions to achieve the same result are also welcome.
也欢迎任何实现相同结果的建议。
采纳答案by alex
overflow: hiddencan't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
overflow: hidden不能被后代元素覆盖 - 它们将始终被带有overflow: hidden.
回答by Serg Hospodarets
Solution:
Remove position:relative;rule from box with overflow:hidden;and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden;will ignore this rule.
Demo: http://jsfiddle.net/88fYK/5/
解决方案：position:relative;从框中删除规则overflow:hidden;并将其设置为她的父框之一。那么盒子中的绝对盒子overflow:hidden;会忽略这个规则。演示：http: //jsfiddle.net/88fYK/5/
回答by puppybits
Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.
设置元素的 position:fixed 将从正常的文档流中删除元素及其子元素，从而允许取消剪辑。但是您必须相对于浏览器窗口手动重新定位它。不是一个很好的解决方案，但它是一种解决方法。
回答by Haimei
if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"
如果您的容器设置为“溢出：隐藏；” 并且您的下拉菜单在此容器下，您只需要设置“位置：绝对；”
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}
回答by Shadow
try to put position:fixed on dropdown content.
尝试将位置：固定在下拉内容上。
.dropdown-content{
position:fixed
}
回答by nano nani
For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that
对于那些在已经给出的答案中没有找到问题解决方案的人，你可以尝试做我所做的，即给你的“导航栏”一个与其他“容器”不同的“ID” .....在尝试了 2 小时 46 分钟后.....
