在不改变输入框位置的情况下，将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;
}

- RSolberg

Answer 1

你只需要将 <div> 元素设置为绝对定位：

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

绝对定位的元素完全脱离了HTML文档中的“流”，因此不会影响其他元素的渲染。上面的例子将<div>放置在其父元素的左上角，您可以通过更改top和left属性的值来移动它。如果需要，允许使用负值，并且还可以使用bottom或right。如果您想要根据其父元素的高度垂直地拉伸<div>，则可以设置top和bottom而不是height（类似地，对于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>

然后将 <div> 元素应用 position 属性：

div.outerclass {
    position: relative;
}

- Ben Blank

---

它将someclass div抛到了左上角(0,0)而不是表格单元格的(0,0)处... - RSolberg

非常抱歉！我关于表格单元格建立上下文的说法是错误的。因为更改表格单元格的position属性不安全（在所有浏览器上都无法正常工作），所以您需要创建一个包装器<div>。我已经更新了我的答案。 - Ben Blank

Answer 2

您需要将其放置在另一个 position:relative 的 div 中（这就是您希望此 div 出现的位置）。 您当前的 CSS 将使其与屏幕左上角相距0像素。

- brettkelly

Answer 3

如果我理解正确，问题是如何在不影响屏幕上其他元素的情况下显示/隐藏一个元素。

为了实现这一点，请不要使用display属性，而是使用visibility属性。当一个元素是不可见的时，它仍然占据它在可见时所占据的空间。（参见https://developer.mozilla.org/en-US/docs/Web/CSS/visibility）

visibility:hidden;

- user2002907