Cannot focus (click into) html input elements

Question

TL;DR click the link

My input elements are on strike and refuse to work. I've stripped this down to isolate the variables, and I've found a few things that fix the problem, but I know there's something else going on here...

http://jsfiddle.net/9PkYG/2/

HTML and CSS per SO guidelines:

<div class="fl half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="fr half">
    <div class="input-wrap">
        <input />
    </div>
    <div class="input-wrap">
        <input />
    </div>
    <div class="clear"></div>
</div>
<div class="input-wrap">
    <select>
        <option>Select</option>
    </select>
</div>

CSS:

.fl { float: left; }
.fr { float: right; }

.half { width: 50%; }

input { border: 1px solid black; }

.input-wrap { margin-bottom: 14px; position: relative; }

.clear { clear: both; }

Answer 1

The .input-wrap div is overlapping the inputs. SO, when you click on the inputs, you are actually clicking .input-wrap which is over them.

The reason is that the .half divs that contain the inputs are floating. Easy fix would be to add style clear:both on you existing css add class 'clear' to .input-wrap div.

<div class="input-wrap clear">
    <select>
        <option>Select</option>
    </select>
</div>

See http://jsfiddle.net/mafUh/1/

Answer 2

Adding position: relative; z-index: 1; to the input {} rule seemed to work, thanks to Musa's suggestion.

http://jsfiddle.net/9PkYG/4/

However, this doesn't seem like the best solution, can you not have input elements inside position: relative???

Ignoring this solution, I'm still looking for a better answer. This seems like a bug... Why would removing the select element, or removing the floats, effect the z-index of the inputs/wrap?