CSS忽略溢出：隐藏答案

【问题标题】：CSS ignore overflow: hiddenCSS忽略溢出：隐藏
【发布时间】：2019-03-06 14:42:37
【问题描述】：

我正在处理 this website 的导航，但下拉导航遇到问题。

基本上，我已将overflow: hidden 应用于保存导航项的容器，以便滚动效果正常工作（导航项的底部被“屏蔽”关闭）；如果您在网站上滚动导航，您就会明白我的意思。

产品有一个下拉导航。作为内置 Business Catalyst (CMS) 的网站，我无法控制导航项的嵌套方式，但我显然可以使用 JQuery 设置它们的样式/定位它们。

有没有办法让div#navigation 中的下拉容器忽略我应用的overflow: hidden 规则？我尝试将position 设置为absolute 并使用z-index，但没有运气。

也欢迎任何实现相同结果的建议。

【问题讨论】：

我的工作计算机在查看该站点时正在爬行。只是说。
@Marty 我建议你把它带回一个简单的解决方案。例如。导航。使其相对，删除高度、边距和溢出并添加top: -60px;。简单得多，您将开始获得您想要的结果。还要让您的内容相对定位，z-index 为 100。

【解决方案1】：

解决方案：从带有overflow:hidden; 的框中删除position:relative; 规则并将其设置为她的父框之一。然后在带有overflow:hidden; 的框中的绝对框将忽略此规则。演示：http://jsfiddle.net/88fYK/5/

【讨论】：

如果在具有溢出的元素和具有绝对位置的元素之间的元素中需要相对位置，则此方法不起作用。任何想法？ jsfiddle.net/88fYK/439
即使需要滚动框的内容也无法正常工作。
@charles 在您的演示中，该方法按预期工作。如果你真的需要在overflow:hidden 和position:absolute 之间带有position:realtive; 的框 - 将带有position:absolute 的块作为子元素移动到<body/> 元素。
@FezVrasta 在这种情况下使用其他技术，例如像往常一样-stackoverflow.com/questions/7074114/css-ignore-overflow-hidden/…
我必须设置position: static;。

【解决方案2】：

overflow: hidden 不能被后代元素覆盖 - 它们将始终被带有 overflow: hidden 的元素剪裁。

【讨论】：

【解决方案3】：

设置元素的 position:fixed 将从正常的文档流中移除元素及其子元素，从而允许它被取消剪辑。但是您必须相对于浏览器窗口手动重新定位它。不是一个很好的解决方案，但它是一种解决方法。

【讨论】：

不适用于 IE。固定位置不会删除元素并移动它，如果该元素已隐藏溢出，则该元素仍将被最初添加到的父级剪辑。但是，如果您可以控制制作下拉菜单的代码，您可以随时将其添加到正文的末尾，因为固定位置始终相对于浏览器左上角。

【解决方案4】：

如果您的容器设置为“溢出：隐藏；”并且您的下拉菜单在此容器下，您只需设置“位置：绝对；”

.container {
  overflow: hidden;
}

.your_dropdown_menu {
  position: absolute;
}

【讨论】：

【解决方案5】：

尝试将位置：固定在下拉内容上。

.dropdown-content{
   position:fixed
}

【讨论】：

【解决方案6】：

对于那些在已经给出的答案中没有找到解决问题的方法的人，您可以尝试做我所做的，即为您的“导航栏”提供与其他“导航栏”不同的“ID” “容器”............在尝试了所有东西 2 小时 46 分钟之后......我说为什么不这样做，它起作用了，你永远不知道它可能就这么简单

【讨论】：