Ne peut pas se concentrer (clic) html des éléments d'entrée

TL;DR cliquez sur le lien

Ma éléments d'entrée sont en grève et refusent de travailler. J'ai dépouillé ce afin d'isoler les variables, et j'ai trouvé quelques choses qui résout le problème, mais je sais qu'il y a quelque chose d'autre se passe ici...

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

HTML et CSS DONC par les directives:

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

OriginalL'auteur Michael Lewis | 2013-08-08

  1. 5

    L' .entrée-wrap div se chevauchent les entrées. DONC, lorsque vous cliquez sur les entrées, vous êtes en fait en cliquant sur .entrée-wrap qui est au-dessus d'eux.

    La raison en est que l' .la moitié divs qui contiennent les entrées sont flottants.
    Solution facile serait d'ajouter un style de clear:both sur vous css existant ajouter une classe "clear" pour .entrée-wrap div.

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

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

    ahh! Je vois.. c'est le fond de la div qui se chevauchent dans la partie supérieure. Musa a eu la bonne idée, mais il y a beaucoup de .entrée-wraps et je ne savais pas que c'était le fond d'un couvrant le haut (en raison d'un flotteur de compensation de l'émission)

    OriginalL'auteur Jithesh

  2. 2

    Ajoutant position: relative; z-index: 1; à la input {} règle semblait fonctionner, grâce à Musa la suggestion.

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

    Cependant, cela ne semble pas être la meilleure solution, pouvez-vous ne pas avoir d'entrée des éléments à l'intérieur de la position: relative???

    Ignorant cette solution, je suis toujours à la recherche d'une meilleure réponse. Cela semble être un bug... Pourquoi serait-suppression de l'élément select, ou le retrait de la flotte, l'effet de la z-index des entrées/wrap?

    OriginalL'auteur Michael Lewis

  3. 1

    Votre div .entrée-wrap est plus de l'entrée, de la suppression de position: relative semble mettre derrière les entrées.

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

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

    mais j'ai besoin de la pos: rel; de sorte que je peux pos: abs quelque chose d'autre à l'intérieur de l'entrée-wrap
    Pourquoi ne pas vous mettre les entrées dans la div?

    OriginalL'auteur Musa