[踩坑] CSS中overflow-y: visible;不起作用

Muninn 发布于2019-08-29 16:43 / 3359人阅读

摘要：场景最近要做的一个需求是移动端的页面，要求有一排可选择的卡片超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图心想在父容器上加一个不就搞定了嘛。我想应该是影响的，所以想通过来解决结果是不行的。

场景

最近要做的一个需求是移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图：

心想：so easy, 在父容器上加一个max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下：


  
    
  
  
    
  
  
    
  


.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来处理。

云服务器 GPU云服务器 php中n不起作用不起作用事务不起作用 nginx不起作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113935.html

CSS总结

摘要：，视窗高度，等于视窗高度的。并不会对他周围的元素产生任何影响。修改属性只会造成本元素的重绘。虽然它和普通的类相似，可以为已有的元素添加样式，但是它只有处于树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 display inline/inline-block/block -->> 牛奶/果冻/坚果 inline: img, span, strong, em, i, em, a...

godlong_X 2019-08-30 14:04 评论0 收藏0
张鑫旭-overflow的细节笔记

摘要：中的问题中设置尺寸和不起作用，此时需要为才会起作用下的问题的出现所有的均是来自于，不是。证明就是本省是有的的。及以下默认右侧始终有一个的条。如果滚动区域写了上下那么会缺失滚动条导致布局问题滚动条是会占据宽度的，所以最好是把宽度预留足够。 overflow的一些小问题 overflow-x和overf-y同时使用的问题如果overflow-x和overflow-y二者的值相同，等同于o...

crossoverJie 2019-08-29 11:15 评论0 收藏0
CSS Sticky 其实很简单

摘要：大致步骤如下监听滚动事件，计算目标元素距离视口的距离。距离满足条件时，创建占位元素，修改目标元素定位方式为。仅仅为了实现这个效果页面上没有其他内容大动干戈性价比很低。对症下药，让滚动发生在被误匹配上的祖先元素内即可恢复。为什么要写这篇文章 Sticky 也不是新知识点了，写这篇文章的原因是由于最近在实现效果的过程中，发现我对 Sticky 的理解有偏差，代码执行结果不如预期。决定写篇文章重新...

番茄西红柿 2019-05-23 15:55 评论0 收藏0
CSS Sticky 其实很简单

摘要：大致步骤如下监听滚动事件，计算目标元素距离视口的距离。距离满足条件时，创建占位元素，修改目标元素定位方式为。仅仅为了实现这个效果页面上没有其他内容大动干戈性价比很低。对症下药，让滚动发生在被误匹配上的祖先元素内即可恢复。为什么要写这篇文章 Sticky 也不是新知识点了，写这篇文章的原因是由于最近在实现效果的过程中，发现我对 Sticky 的理解有偏差，代码执行结果不如预期。决定写篇文章重新...

davidac 2019-05-22 19:43 评论0 收藏0
overflow-y:auto/hidden/scroll和overflow-x:visible组合

摘要：但是会因为实际使用情况和逻辑上的复杂程度而变得并不好用。至于浏览器为什么会这样就只搬运了不详细解释参考资料解决方案原因最近做项目想做一个这样的效果：就是我想要内部div x轴溢出div则显示y轴溢出div则出现滚动条于是用到了overflow-y 和 overflow-x 这个css属性原来以为css中直接设置就ok { overflow-y：scroll; overflow-x: ...

lansheng228 2019-08-01 18:20 评论0 收藏0