CSS中overflow-y:visible;不起作用的原因分析及解决方法_cssoverflow-yx轴也隐藏了资源-CSDN文库

69 浏览量 2020-09-22 11:17:52 上传评论 1 收藏 73KB PDF 举报

资源推荐

资源详情

资源评论

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38746926

粉丝: 12
资源: 994

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip