场景
最近要做的一个需求是移动端的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’.
大致意思是,当overflow-x为scroll或者auto时,overflow-y被设置为auto,反之亦然。这就很尴尬了,那怎么解决这个问题呢。
ps: 上面那段话说是来自于w3c的文档,但是我找了半天没找到原文,麻烦找到了的小伙伴留个链接~ [手动狗头]
How
终究还是想让左上角的红色方块显示完整的,那么解决方案呢,我这里采用的是在container上添加以下样式
padding-top: 20px; margin-top: -20px;
原理其实挺简单的,加了padding-top: 20px;后,绝对定位的红色方块就有空间显示了,不会超出容器体积,然后通过margin-top: -20px;抵消位置的变化.如图
ps: 第一个红色方块左边被遮住的部分同样的思路解决,即通过padding-left和margin-left来处理。
总结
以上所述是小编给大家介绍的CSS中overflow-y: visible;不起作用的原因分析及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]
- 《迪克牛仔 坛奇精选 2CD台首版》 [WAV+CUE][600MB]
- 陈明.1998-为了爱影视歌曲+新歌【中唱】【WAV+CUE】
- 黄小琥.2009-简单/不简单【华纳】【WAV+CUE】
- 洪卓立.2010-TASTE.OF.LOVE新曲+精丫英皇娱乐】【WAV+CUE】
- 战锤40K星际战士2职业强度排行
- 交错战线PVE国家队成员以及常用角色推荐