更好的理解position:relative的应用

Posted 2020-10-10 coconutGirl

先记录一下问题。在使用iview的表格进行左右两列固定时，iview会自己在传过去的高度上加上一个滚动条的高度，如果有出现横向滚动条还好，但是如果没有出现横向滚动条就会这样

如果项目中公用样式文件还很巧的把iview设置的表格边框去掉了，而你不知道，那简直就是灾难

我就正好碰上了这种情况，并且一发现这个情况就被同事定为我的bug,然后我就苦逼的一直在改bug，结果浪费了不少时间。后来是在给iview传过去的高度上减去了滚动条的高度，但是依然会有问题。所以最后决定自己写表格好了，事实证明自己写也不会花很长时间。。。

自己写碰到需要手动改变单元格的left值或者top值来达到滚动的效果，就需要td设为position:relative.让单元格相对自身原来的位置来移动滚动条滚动的距离。

 借鉴iview的思路，用四个表格实现左边列和表格头部的固定，需要注意的是左边固定列的外框高度需要减去滚动条的高度，否则会遮挡住滚动条

 

解决这个问题的过程表明：

第一：有问题可借鉴官方实例或者其他的相同或者相似的案例

第二：要学会看源码

第三：要相信自己啊，方向错了，只会浪费更多时间。