Overlapping I / O

Question

I write a group of forms with two inputs and set {margin-left: -5px} for the second to remove the spacing between them. However, when the first input is focused, the blue glowing effect of the right border is absent. I think it is covered by the left border of the second input, so I tried to increase its z-index, but it does not work. How to solve this problem? Here are the html and css codes, and the problem is shown in the picture.

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

image of the problem

Answer 1

Just add position: relative;

.form-control:focus {

   position: relative;

}