入力タグの背後にある位置ラベル

Question

修正する必要のあるHTML/CSS in this jsfiddleがあります。もともと、CSSは次のHTML構造のために定義されました：

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

ラベルは、Z-インデックス値を使用して入力の背後に配置されます。今度は私のHTML構造が次のように変更されました：

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

そして同じ動作が必要です。私は、入力とラベルのz-index値を駄目にしていましたが、何の成功もありませんでした。私は何が欠けていますか？

Answer 1

移動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インデックスを変更する場合でも、そのため、あなたがその背後にあるラベルを見ることができるまでspanから背景url("http://s2.postimage.org/5u8nbrl0/field_a.png") no-repeatとpositionとz-index。

チェックアウトjsFiddle