html - 在不改变输入框位置的情况下将 DIV 定位在输入框上方

Question

我想在输入框(文本框)上方添加一个 DIV，而不更改文本框的呈现位置。当文本框有焦点或没有焦点时，此 DIV 将显示/隐藏...要使此 DIV 直接显示在文本框上方而不导致文本框向下移动，正确的 CSS 格式是什么？

    <td>
        <div class="someclass">images</div>
        <input type="text" maxlength="2" class="timebox" />
    </td>

编辑
我修改了 CSS 以遵循下面的解决方案(来自 Ben Blank)并且 DIV 现在呈现在屏幕的左上角而不是表格单元格...

.inputbanner
{
    position: absolute;
    display: none;
    width: 30px;
    top: 0;
    left: 0;
}

Answer 1

您只需要定位您的 <div>绝对:

div.someclass {
    position: absolute;
    top: 0;
    left: 0;
}

绝对定位元素完全在 HTML 的“流”之外，因此不会影响其他元素的呈现。上面的示例放置了 <div>在其父项的左上角；您可以通过更改 top 的值来移动它和 left特性。如果需要，可以使用负值，也可以使用 bottom或 left如果你更喜欢。同时设置 top和 bottom但不是 height可以用来拉伸(stretch)你的 <div>垂直基于其父项的高度(对于 left 、 right 和 width 也是类似的)。

<div>的父项需要建立“上下文”，通常通过添加“position: relative”来完成，但将该样式应用于表格单元格并不安全。相反，您应该用外部 <div> 包裹单元格的内容。 :

<td>
    <div class="outerclass">
        <div class="someclass">images</div>
        <input type="text" maxlength="2" class="timebox" />
    </div>
</td>

然后申请position到那个新的<div> :

div.outerclass {
    position: relative;
}