Html 将 DIV 置于输入框上方而不改变输入框的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1156365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position DIV above Input Box without changing position of Input Box
提问by RSolberg
I'd like to add a DIV above an input box (textbox) without changing the rendered position of the textbox. This DIV will be shown/hid when the textbox has focus or not... What is the proper CSS formatting for this DIV to show directly above the textbox without causing the textbox to shift down?
我想在输入框（文本框）上方添加一个 DIV，而不更改文本框的呈现位置。当文本框有焦点与否时，此 DIV 将显示/隐藏......此 DIV 的正确 CSS 格式是什么，以直接显示在文本框上方而不导致文本框向下移动？
<td>
<div class="someclass">images</div>
<input type="text" maxlength="2" class="timebox" />
</td>
EDIT
I modified the CSS to follow the solution below (from Ben Blank) and the DIV is now rendering in the top left of the screen and not the table cell...
编辑
我修改了 CSS 以遵循下面的解决方案（来自Ben Blank）并且 DIV 现在呈现在屏幕的左上角而不是表格单元格...
.inputbanner
{
position: absolute;
display: none;
width: 30px;
top: 0;
left: 0;
}
回答by Ben Blank
You simply need to position your <div>absolutely:
您只需要<div>绝对定位：
div.someclass {
position: absolute;
top: 0;
left: 0;
}
Absolutely positioned elements are entirely outside the "flow" of HTML and so do not affect the rendering of other elements. The example above places the <div>at the top-left corner of its parent; you can move it by changing the values of the topand leftproperties. Negative values are allowed, if you need them, and you can also use bottomor leftif you prefer. Setting both topand bottombut not a heightcan be used to stretch your <div>vertically based on the height of its parent (and similarly for left, right, and width).
绝对定位的元素完全在 HTML 的“流”之外，因此不会影响其他元素的呈现。上面的示例将 放置<div>在其父项的左上角；您可以通过更改top和left属性的值来移动它。如果需要，可以使用负值，如果您愿意，也可以使用bottom或使用负值left。同时设置top和bottom而不是一个height可以用来拉伸你的<div>垂直基于其父的高度（以及类似的left，right和width）。
The <div>'s parent needs to establish "context", usually done by adding "position: relative", but it isn't safe to apply that style to table cells. Instead, you should wrap the contents of your cell with an outer <div>:
该<div>的父需要建立‘上下文’，通常加入的‘完成position: relative’，但它是不安全的这种风格应用到表格单元格。相反，您应该用外部包装单元格的内容<div>：
<td>
<div class="outerclass">
<div class="someclass">images</div>
<input type="text" maxlength="2" class="timebox" />
</div>
</td>
Then apply positionto that new <div>:
然后申请position新的<div>：
div.outerclass {
position: relative;
}
回答by inkedmn
You need to place it inside another div that's position:relative(and that is where you want this div to appear). Your current CSS will position it 0px from the top/left (which is the top left corner of the screen).
您需要将它放在另一个 div 中position:relative（这就是您希望此 div 出现的位置）。您当前的 CSS 会将其定位在距离上/左（屏幕的左上角）0px 的位置。
回答by Chris Jeffries
If I understand correctly the question is how to show/hide an element without the other elements on the screen moving as a result.
如果我理解正确，问题是如何显示/隐藏一个元素，而屏幕上的其他元素不会因此而移动。
To achieve this, don't use the display property, use the visibility property instead. When an element is invisible it still occupies the space it would occupy if it were visible.
为此，请不要使用 display 属性，而应使用可见性属性。当一个元素不可见时，它仍然占据它可见时将占据的空间。
(See https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
（参见https://developer.mozilla.org/en-US/docs/Web/CSS/visibility）
visibility:hidden;
