如何使用css相对于绝对定位的输入框定位标签

Question

我正在尝试仅使用 html/css 相对于绝对定位输入框来定位标签。

html是由代码生成的，它会输出一个这样的输入框：

<input type="text" style="position: absolute; top: 200px; left: 200px;"></input>

然后标签有一个具有 4 个可能值的类，左、上、右和下。

<input type="text" style="position: absolute; top: 200px; left: 200px;">
    <label class="top">Client Forename</label>
</input>

如果标签定位在右边，那么标签需要到输入框的右边等等等等。

我对 CSS 的了解是，父级通常具有相对位置，子级是绝对位置，允许子级相对于父级定位在任何位置。

但是由于输入已经被设置为绝对，我不知道如何实现这一点。

谁能帮忙？

Answer 1

input 不能包含其他元素，因此不能有其他元素相对于它定位。但是，您可以将这两个元素包装在一个共同的父级中并绝对定位它。然后label 可以相对于父元素进行绝对定位。

http://jsfiddle.net/KeW3R/1/

新的 HTML 结构：

<div style="position: absolute; left: 0; top: 0;">
    <input type="text"/>
    <label class="right">label</label>
</div>
<div style="position: absolute; left: 100px; top: 50px;">
    <input type="text"/>
    <label class="left">label</label>
</div>
<div style="position: absolute; left: 0; top: 100px;">
    <input type="text"/>
    <label class="top">label</label>
</div>
<div style="position: absolute; left: 0; top: 150px;">
    <input type="text"/>
    <label class="bottom">label</label>
</div>

CSS：

label{
    position: absolute;
}
.right{
    top: 0;
    left: 100%;
}
.left{
    top: 0;
    right: 100%;
}
.top{
    bottom: 100%;
    left: 0;
}
.bottom{
    top: 100%;
    left: 0;
}