我们使用第三方的组件时,第三方组件有时会依据我们引入组件的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,就可以实现一个很强大的居中定位的方法。
如果想要了解更多关于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