CSS中overflow-y: visible;不起作用的处理办法
[摘要]本篇文章给大家带来的内容是关于CSS中overflow-y: visible;不起作用的解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。场景最近要做的一个需求是移动端的h5页...
本篇文章给大家带来的内容是关于CSS中overflow-y: visible;不起作用的解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。场景
最近要做的一个需求是移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图：
心想：so easy, 在父容器上加一个max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下：
<div class="container">
<div class="son">
<div class="delete_btn"></div>
</div>
<div class="son">
<div class="delete_btn"></div>
</div>
<div class="son">
<div class="delete_btn"></div>
</div>
</div>
.container {
max-width: 500px;
overflow-x: auto;
white-space: nowrap;
}
.son {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightblue;
position: relative;
margin-right: 20px;
}
.delete_btn {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background-color: red;
transform: translateX(-50%) translateY(-50%);
}原本以为一切顺利，结果得到的结果如图：
看第矩形左上角的红色方块，原本为20 * 20的红色方块有一部分被隐藏了。我想应该是overflow影响的，所以想通过overflow-y: visible;来解决,结果是不行的。细心的朋友应该记得overflow的默认值就是visible。那么原因是什么呢？
Why
找了好久，大致了解到是如下原因
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
