CSS overflow-y：visible，overflow-x：hidden [英] CSS overflow-y: visible, overflow-x: hidden

问题描述

我已阅读此 CSS overflow-x隐藏和溢出可见的（和很多其他帖子），但我无法让我在特定情况下工作。

I have read this CSS overflow-x hidden and overflow-y visible (and a lot of other posts) but i can't get this to work in my specific case.

我使用ths slick-slider ，并希望添加下拉菜单。所以我必须使用一个特殊的标记。

I'm using ths slick-slider and want to add dropdown-navigation. so i have to use a special markup.

下拉菜单应该溢出滑块。

The dropdown should overflow the slider.

我重新创建了问题在 小提琴

I recreated the problem in the fiddle

感谢您的帮助！

推荐答案

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

Setting overflow-x or overflow-y to hidden causes the other to be treated as if it has a value of auto. So slick-slider adds a scrollbar for any overflow in the y direction.

通常可以通过添加position：absolute来解决这个问题。然而，绝对定位是基于最接近的具有相对定位的父元素。在这种情况下，这是光滑的幻灯片，这是一个光滑的滑块的孩子。因此，下拉列表仍然位于光滑滑块内，并且不会溢出。

You can normally get around this by adding position: absolute. However, absolute positioning is based on the closest parent element with relative positioning. In this case, that's slick-slide, which is a child of slick-slider. As a result the dropdown is still positioned inside of slick-slider and doesn't overflow.

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

To resolve the issue remove position: relative from all classes that currently have it. I recommend adding position: relative to the wrapper class as well.

这篇关于CSS overflow-y：visible，overflow-x：hidden的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！