absolute 与overflow:hidden常见bug

最新推荐文章于 2025-04-01 21:00:00 发布

原创最新推荐文章于 2025-04-01 21:00:00 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#absolute #overflow

CSS 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了CSS中绝对定位与溢出隐藏属性交互产生的问题及解决方案。通过实例演示如何避免因overflow:hidden导致的子元素裁剪，并介绍两种有效修复方法。

我们使用第三方的组件时，第三方组件有时会依据我们引入组件的DOM的位置进行定位，很常见的CSS写法就是使用position：relative和position:absolute进行搭配使用，有时在父容器的外层添加了overflow:hidden之后，就会出现一些莫名奇妙的bug.下面举个例子

你可以访问如下页面：https://alizwell.github.io/front-end/CSS/absolute&overflowHidden.html

你可以看到因为overflow：hidden的影响，我们自己定义的tooltips超出容器的部分将会被完全截断，而解决的办法目前来看有两种，一种是你将父容器的overflow：hidden属性给去除掉，另外一种方法是给组件定位依赖的那个position：relative属性的容器再套一个容器，同时设置属性position: absolute. 其本质是，将position：relative的容器包裹在position：absolute的容器中，使其逃离overflow：hidden的影响。、

这里有一点需要说一下，那就是当容器设置position:absolute时，如果不给他设置top,left,right,bottom时，容器的位置是会保留在其在正常文档流中的位置，但是其将不会影响文档流中其他正常元素的位置。这个叫做所谓的位置跟随性，利用这个可以做很多有意思的事情。
还有一点就是如果设置了对立的位置属性，如left和right,top和bottom.那么这个时候在结合margin: auto，就可以实现一个很强大的居中定位的方法。