将DIV定位在输入框上方而不改变输入框的位置答案

【问题标题】：Position DIV above Input Box without changing position of Input Box将DIV定位在输入框上方而不改变输入框的位置
【发布时间】：2020-01-26 11:54:50
【问题描述】：

我想在输入框（文本框）上方添加一个 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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

绝对定位的元素完全在 HTML 的“流”之外，因此不会影响其他元素的呈现。上面的示例将<div> 放在其父级的左上角；您可以通过更改 top 和 left 属性的值来移动它。如果需要，可以使用负值，如果您愿意，也可以使用 bottom 或 left。设置top 和bottom 但不设置height 可用于根据其父级的高度垂直拉伸<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;
}

【讨论】：

它将 someclass div 扔到左上角 (0,0) 而不是表格单元格的 (0,0)...
抱歉！我对建立上下文的表格单元格不正确。因为更改表格单元格的position 属性是不安全的（它不适用于所有浏览器），所以您需要创建一个包装器<div>。我已经更新了我的答案。

【解决方案2】：

您需要将它放在另一个 div 中，即 position:relative（这就是您希望该 div 出现的位置）。您当前的 CSS 会将其定位在距顶部/左侧 0px 的位置（即屏幕的左上角）。

【讨论】：

【解决方案3】：

如果我理解正确，问题是如何显示/隐藏一个元素，而不会导致屏幕上的其他元素移动。

要实现这一点，不要使用 display 属性，而是使用 visibility 属性。当一个元素不可见时，它仍然占据它可见时所占用的空间。

（见https://developer.mozilla.org/en-US/docs/Web/CSS/visibility）

visibility:hidden;

【讨论】：