Question

我想在输入框（文本框）上方添加DIV，而不更改文本框的渲染位置。当文本框有焦点时，这个DIV将被显示/隐藏...这个DIV的正确CSS格式是什么，它直接显示在文本框上方而不会导致文本框向下移动？

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

修改
我修改了CSS以遵循下面的解决方案（来自 Ben Blank ）并且DIV现在渲染在屏幕的左上角而不是表格单元格... < / p>

.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可以根据其父级的高度垂直拉伸<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;
}

Answer 2

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

Answer 3

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

要实现此目的，请不要使用display属性，而应使用visible属性。当元素不可见时，它仍然会占据可见的空间。

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

visibility:hidden;

将DIV置于输入框上方而不改变输入框的位置

3 个答案: