Bootstrap輸入邊框重疊

Question

我正在寫一個帶有兩個輸入的表單組，併爲第二個輸入邊框設置了{margin-left：-5px}來刪除它們之間的間距。但是，當第一個輸入焦點時，右邊框的藍色發光效果就會丟失。我認爲它被第二個輸入的左邊框覆蓋，所以我試圖增加它的z-index，但它不起作用。如何解決這個問題呢？這裏是html和css代碼，問題顯示在圖片中。

<form class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" size="1" style="border-top-right-radius: 0; border-bottom-right-radius: 0"> 
     <input type="text" class="form-control" size="1" style="border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px"> 
    </div> 
</form> 

.form-control:focus { 
    z-index: 2; 
} 

problem image

Answer 1

只需添加position: relative;

.form-control:focus { 

    position: relative; 

}