近期接手了個iview實現的後臺管理系統，需要添加個輸入框，根據輸入資訊查詢的功能，還需要展示搜尋歷史。

看了下iview元件，裡面有個AutoComplete 自動完成元件，看了下這個效果，跟想要的類似，那就用這個。

元件是挺好用的，但測試提了個問題：彈出的內容在頁面寬度改變的時候不跟著input走，而是一直定在原處（這都能測到，也是可以的）。

立馬看了下程式碼，對照AutoComplete元件，發現貌似確實有問題：https://codepen.io/jiangguangyao/pen/wvPadGy 頁面demo佈局大致如下，在搜尋歷史展示的時候，再修改螢幕的寬度，你會發現，搜尋歷史內容區並不會跟著上面input走（demo中父級用的flex佈局，通過float將此元件浮動到右側效果相同）。

看了下API，有個 transfer 屬性，意思是是否將彈層放於body內，預設false，還提供了個transfer-class-name，給浮層新增額外class（transfer為true時用）

既然有這倆屬性，那就試著改下

舉例：transfer-class-name屬性值為autoCompleteClass，因為下方浮層是定位的，那就讓他居右定位，給這個屬性加上 right ，讓他以右邊側進行定位，再將原先的 left 值設auto （注意權重，都需加 !important ）

看了下效果，完美，但是！！！當右側出現滾動條呢？？？在開啟後修改寬度的過程中，如果出現滾動條從無到有/從有到無的情況，浮層會偏移一個滾動條的寬度！！！

難受，這條路走不通了

沒辦法，開啟控制檯查驗，下方搜尋歷史區的元件是有定位的，left值居然這麼大，這定位難道是根據瀏覽器定的？在螢幕寬度改變的時候，left值不變，基本可以估計出，當前元件並沒有根據螢幕寬度動態計算偏移量的操作。

那能不能讓他跟著input框走？看了下，浮層是absolute 絕對定位，跟input是同一層級的，但是，此元件外面是有包裹的，相當於一個大盒子，內嵌一個input和一個浮層，我們都知道，絕對定位是相對於據他最近的第一個父元素的定位關係（static除外）進行定位的，那這直接給盒子加個定位不就完了？

OK，直接給盒子加上相對定位，完美！！！ https://codepen.io/jiangguangyao/pen/JjOdNxE

問題總結： 因為之前一直是玩的element-ui的，個人感覺element-ui還是相當不錯的，雖然我常罵他垃圾，已經發現的，況且都提上issue的bug也不改，但他最起碼的，有解決方案，這個框架能適應大多數場景，拿來即用，基本上除了資料，剩下的問題都不需要操心，人家全給你想好了想到了，還是比較方便的，因此形成了個固定思維： 遇到問題先看API，API能解決的，直接解決，解決不了的，在找其他辦法。相較而言，我還是更願意相信官方的，拿此處舉例，問題的解決方法，就是給AutoComplete標籤上寫個relative定位，就解決了，但當初封裝這個框架的時候，為何不給封進去，像我這樣加會不會有什麼問題，可能的問題是什麼，還是需要好好了解了解，有遇到相同問題的，可以看下。