将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可以用来拉伸你的<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;
}