html - CSS 溢出-y : visible, 溢出-x:隐藏

标签 html css drop-down-menu overflow slick.js

我读过这篇文章CSS overflow-x hidden and overflow-y visible (以及很多其他帖子)但我无法让它在我的具体情况下工作。

我正在使用slick-slider并想添加下拉导航。所以我必须使用特殊的标记。

下拉菜单应溢出 slider 。

我在 fiddle 中重新创建了该问题

感谢您的帮助!

最佳答案

将overflow-x或overflow-y设置为隐藏会导致另一个被视为具有auto值。因此 slick-slider 为 y 方向上的任何溢出添加了一个滚动条。

您通常可以通过添加position:absolute来解决这个问题。然而,绝对定位是基于具有相对定位的最接近的父元素。在本例中,它是 slick-slide,它是 slick-slider 的子项。因此,下拉菜单仍然位于 slick-slider 内部并且不会溢出。

要解决此问题,请从当前拥有它的所有类中删除position:relative。我建议也添加相对于包装类的位置。

关于html - CSS 溢出-y : visible, 溢出-x:隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39152490/

相关文章:

css - 如何防止设计在浏览器窗口中被切断?

html - 将鼠标悬停在下拉菜单上会将其下方的内容稍微向上移动并在页面右侧创建边距

java - Bootstrap 下拉菜单不起作用

html - 具有转换问题的绝对位置居中

javascript - 从文件浏览器和 HTML5 剪贴板 API 粘贴

javascript - 调试 Bootstrap 3 模板

html - 无法连接 Bootstrap 页面

html - 图像元素的背景图像 z-index 问题

HTML/CSS 下拉问题

javascript - 为什么 html 音频自动播放不起作用