Поместить метку за тегом ввода

Question

У меня есть некоторый HTML / CSS в этом jsfiddle , который мне нужно изменить. Первоначально CSS был определен для следующей структуры HTML:

  <span>
     <input></input>
  </span>
  <label></label>

Где метка расположена за входом, используя значения z-index. Теперь моя структура HTML изменилась на это:

  <span>
     <input></input>
     <label></label>
  </span>

И мне нужно такое же поведение. Я попытался возиться со значениями z-index для ввода и метки без какого-либо успеха. Что мне не хватает?

Answer 1

переместите фон url("http://s2.postimage.org/5u8nbrl0/field_a.png") no-repeat и position и z-index из span в input

form.form-a p span.f input { 
    ...
    background: url("http://s2.postimage.org/5u8nbrl0/field_a.png") no-repeat; 
    position: relative;
    z-index: 20;
}

Он имеет невидимый фон, и поэтому вы можете видеть метку позади него даже при изменении z-индекса.

Проверьте jsFiddle