【踩坑】CSSoverflow-y-visible;不起作用

时间：2023-03-31 00:26:49 CSS

场景最近一个需求是移动端的h5页面，要求有一排可选的卡片，超出容器的部分可以左右滑动，而且每张卡片里面要有一个删除按钮左上角。如下图：心想：soeasy，加个max-width:200px;空白：nowrap；溢出-x：自动；到父容器。演示如下：

。容器{最大宽度：500px；溢出-x：自动；white-space:nowrap;}.son{display:inline-block;宽度：200px；高度：200px；背景颜色：浅蓝色；高度：20px；位置：绝对；顶部：0；左：0；背景色：红色；transform:translateX(-50%)translateY(-50%);}本以为一切顺利，结果如图：看第一个矩形左上角的红色方块，部分隐藏原来的20*20红色方块。我觉得应该是受overflow的影响，所以想通过overflow-y:visible;来解决。但结果不起作用。细心的朋友要记住，overflow的默认值是可见的。那么是什么原因呢？为什么我找了半天，大致明白原因如下：'overflow-x'和'overflow-y'的计算值和它们的指定值是一样的，只是有些组合与'visible'是不可能的：如果一个被指定为'visible'而另一个被指定为'scroll'或'auto'，那么'visible'被设置为'auto'。如果'overflow-y'相同，'overflow'的计算值等于'overflow-x'的计算值；否则就是'overflow-x'和'overflow-y'的一对计算值。大致意思是当overflow-x为scroll或auto时，overflow-y设置为auto，反之亦然。这就很尴尬了，那么如何解决这个问题呢。ps：上面这段话来自w3c文档，找了半天也没找到原文。如果找到请留下链接。所以解决方案，我在这里使用的是添加以下样式padding-top:20px;margin-top:-20px;原理其实很简单，加上padding-top:20px;后，绝对定位的红色方块就会有空间显示，不会超过容器的体积，然后使用margin-top:-20px;抵消位置的变化。如图ps：第一个红色方块左边被覆盖的部分用同样的方法解决，即通过padding-left和margin-left来处理。

上一篇：【每天一包0017】pretty-ms

下一篇：网页布局的主要方法

【踩坑】CSSoverflow-y-visible;不起作用相关文章