最近有一个vuejs项目,其中的router-view是包含在elementui的el-row中的,不过后来为了简化代码,就把外层包裹router-view的el-row给删除了,因为他实在没什么作用,然而出现了异常情况。因为router-view里面存在一些使用position:absolute进行绝对定位的元素,现在把外层el-row删除之后,里面绝对定位的元素都乱掉了,这就很奇怪。
众所周知,要想内层的元素能够基于外层来绝对定位,那么外层元素必须有position:relative属性。然而根据我查看git上该项目的历史版本,发现以前也没有在外层加上position:relative属性,然而以前该项目中内层需要绝对定位的元素都可以实现正常的绝对定位不受影响,一个想法在我脑海诞生,难道el-row自带了position:relative属性吗?经过查找elementui库中的样式文件,发现还真的是这样。
1 | .el-row{position:relative;-webkit-box-sizing:border-box;...... |
在该项目的依赖文件夹中的node_modules\element-ui\lib\theme-chalk\row.css文件的最开头,我们就可以看到,el-row确实存在一个position:relative属性,这就解释了为什么之前在el-row的内层,直接就可以对元素进行绝对定位了。虽说在某个元素的css属性中加上position:relative没有什么特殊的影响,并且还能让内部元素基于外层带有relative属性的元素进行定位,但是不知道elementui在此加上相对定位属性是有什么特殊的用途或者单纯就是随意写上的哈,毕竟这类免费给开发者使用的库和框架虽然大部分时候真的很方便好用,但是有时候里面也是埋了一些坑的。