html - 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;

}