如何使用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;
}