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

我试图只使用html/css相对于绝对定位的输入框来定位标签

html由代码生成，并输出如下输入框：

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

然后，标签有一个类，该类有4个可能的值：left、top、right和bottom

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

客户机名称

如果标签位于右侧，则标签需要转到输入框的右侧等

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

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

---

有人能帮忙吗？

一个

输入不能包含其他元素，因此不能有其他元素相对于它定位。但是，您可以将这两个元素包装在一个公共父元素中，并绝对定位该父元素。然后可以相对于父元素绝对定位
标签


新的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>

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

你真的不应该在
输入中有
标签
，
是的，我同意，因为你可以看出我正在抓紧救命稻草来解决这个问题。@Michaelbella我的父项不需要是
位置：相对的
，它只需要是一个定位元素。i、 e您可以绝对定位一个元素，其父元素具有位置
相对
、
绝对
、
固定
等，而不是
静态
。禁止使用
元素的结束标记。它们是空的。输入中没有标签。输入后有一个标签，然后是一个无效的结束标记。@MichaelBellamy看一下下面James的答案。在输入中使用标签是无效的，浏览器会将它们呈现为同级，而不是放置在输入中的标签，因此您需要按照James的建议将它们都包装在一个公共父级中！非常感谢詹姆斯，这让我走上了正确的道路。我忘了也包括输入框的宽度和高度，所以我稍微修改了您的版本以适应这一点。它需要一些调整，但我就快到了。