CSS overflow-y: visible, overflow-x: hidden

[亡魂溺海] 提交于 2019-12-12 04:21:29

问题


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.

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

Thank you for your help!


回答1:


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.

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.

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.




回答2:


The problem is in .slick-slider class. If you set a little bigger height you can get past overflow, although I don't know why overflow:visible doesn't work.



来源:https://stackoverflow.com/questions/39152490/css-overflow-y-visible-overflow-x-hidden

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!