Question

I have some HTML/CSS in this jsfiddle that I need to modify. Originally the CSS was defined for the following HTML structure:

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

Where the label is positioned behind the input using z-index values. Now my HTML structure has changed to this:

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

And I need the same behavior. I’ve tried messing with z-index values for the input and label without any success. What am I missing?

Answer 1

move the background url("http://s2.postimage.org/5u8nbrl0/field_a.png") no-repeat and position and z-index from the span to the 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;
}

It has an invisible background and therefore you can see the label behind it even when you change the z-index.

Check out the jsFiddle