CSS中overflow-y:可见;不起作用怎么办

　　介绍

这篇文章给大家分享的是有关CSS中overflow-y:可见;不起作用怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

场景

最近要做的一个需求是移动端的编辑页面,要求有一排可选择的卡片,超出容器部分可以左右滑动,同时每张卡片左上角要有一个删除按钮。

心想:很简单,在父容器上加一个max-width: 200 px;空白:nowrap;}overflow-x:汽车;不就搞定了嘛.Demo如下:

& lt; div类=癱ontainer"比; 　　& lt; div类=皊on"祝辞 　　& lt; div类=癲elete_btn"祝辞& lt;/div> 　　& lt;/div> 　　& lt; div类=皊on"祝辞 　　& lt; div类=癲elete_btn"祝辞& lt;/div> 　　& lt;/div> 　　& lt; div类=皊on"祝辞 　　& lt; div类=癲elete_btn"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　 　　.container { 　　max-width: 500 px; 　　overflow-x:汽车; 　　空白:nowrap;} 　　} 　　 　　.son { 　　显示:inline-block; 　　宽度:200 px; 　　身高:200 px; 　　background - color: lightblue; 　　位置:相对; 　　margin-right: 20 px; 　　} 　　 　　.delete_btn { 　　宽度:20 px; 　　高度:20 px; 　　位置:绝对的; 　　上图:0; 　　左:0; 　　背景颜色:红色; 　　变换:translateX translateY (-50%) (-50%); 　　}

原本以为一切顺利,结果得到的结果如图:

看第矩形左上角的红色方块,原本为20 * 20的红色方块有一部分被隐藏了。我想应该是溢出影响的,所以想通过overflow-y:可见;来解决,结果是不行的。细心的朋友应该记得溢出的默认值就是可见的。那么原因是什么呢?

为什么找了好久,大致了解到是如下原因

“overflow-x”的计算值和“overflow-y”是相同的指定值,除了一些组合“可见的”是不可能的:如果> padding-top: 20 px; 　　margin-top: -20 px;

原理其实挺简单的,加了padding-top: 20 px;后,绝对定位的红色方块就有空间显示了,不会超出容器体积,然后通过margin-top: -20 px;抵消位置的变化。如图

ps:第一个红色方块左边被遮住的部分同样的思路解决,即通过padding-left和margin-left来处理。

感谢各位的阅读!关于CSS中overflow-y:可见;不起作用怎么办就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

CSS中overflow-y:可见;不起作用怎么办