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;

}