absolute 与overflow:hidden常见bug

我们使用第三方的组件时,第三方组件有时会依据我们引入组件的DOM的位置进行定位,很常见的CSS写法就是使用position:relativeposition: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,就可以实现一个很强大的居中定位的方法。

如果想要了解更多关于absolute的知识,请查阅如下链接。
1.https://www.zhangxinxu.com/wordpress/2010/01/absolute绝对定位的非绝对定位用法/
2.https://www.zhangxinxu.com/wordpress/2010/12/css-相对绝对定位系列(一)/
3.https://blog.csdn.net/liufeng520/article/details/26058775

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章