在输入标签后面放置标签

【问题标题】：Position label behind input tag在输入标签后面放置标签
【发布时间】：2011-07-22 04:42:39
【问题描述】：

我有一些 HTML/CSS in this jsfiddle 需要修改。最初，CSS 是为以下 HTML 结构定义的：

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

使用 z-index 值将标签放置在输入后面的位置。现在我的 HTML 结构变成了这样：

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

我需要同样的行为。我尝试弄乱输入和标签的 z-index 值，但没有任何成功。我错过了什么？

【问题讨论】：

标签： html css input label positioning

【解决方案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-index，您也可以看到它背后的标签。

查看jsFiddle

【讨论】：

不可见的背景完全把我吓跑了。你太棒了，谢谢！