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
评论0