1. 程式人生 > >更好的理解position:relative的應用

更好的理解position:relative的應用

單元 設置 .com 證明 去掉 註意 -1 src 實例

先記錄一下問題。在使用iview的表格進行左右兩列固定時,iview會自己在傳過去的高度上加上一個滾動條的高度,如果有出現橫向滾動條還好,但是如果沒有出現橫向滾動條就會這樣

技術分享

如果項目中公用樣式文件還很巧的把iview設置的表格邊框去掉了,而你不知道,那簡直就是災難

技術分享

我就正好碰上了這種情況,並且一發現這個情況就被同事定為我的bug,然後我就苦逼的一直在改bug,結果浪費了不少時間。後來是在給iview傳過去的高度上減去了滾動條的高度,但是依然會有問題。所以最後決定自己寫表格好了,事實證明自己寫也不會花很長時間。。。

自己寫碰到需要手動改變單元格的left值或者top值來達到滾動的效果,就需要td設為position:relative.讓單元格相對自身原來的位置來移動滾動條滾動的距離。

借鑒iview的思路,用四個表格實現左邊列和表格頭部的固定,需要註意的是左邊固定列的外框高度需要減去滾動條的高度,否則會遮擋住滾動條

解決這個問題的過程表明:

第一:有問題可借鑒官方實例或者其他的相同或者相似的案例

第二:要學會看源碼

第三:要相信自己啊,方向錯了,只會浪費更多時間。

更好的理解position:relative的應用