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;
}

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

1 个答案: