Html div 漂浮在桌子上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1955810/
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
div floating over table
提问by Rickstar
I am trying to get a div to float over a table so it will be on top of all the text?
我想让一个 div 漂浮在一张桌子上，这样它就会在所有文本的顶部？
回答by T.J. Crowder
Check out absolute positioning, and possibly z-indexas well (although if this is your only absolutely-positioned content, you won't need it). Although there are other ways to get things to overlap, that's probably the most relevant for you.
查看绝对定位，可能还有z-index（尽管如果这是您唯一的绝对定位内容，您将不需要它）。尽管还有其他方法可以让事情重叠，但这可能是最适合您的方法。
Very simple example:
非常简单的例子：
CSS:
CSS：
#target {
position: absolute;
left: 50px;
top: 100px;
border: 2px solid black;
background-color: #ddd;
}
HTML:
HTML：
<p>Something before the table</p>
<div id="target">I'm on top of the table</div>
<table>
<tbody>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
<tr>
<td>Text in the table</td>
<td>Text in the table</td>
</tr>
</tbody>
</table>
回答by jessegavin
I would wrap the table in a "positioned" div. I set the div to position:relativeso that it won't interrupt the flow of the rest of the documents contents.
我会将桌子包裹在“定位”的 div 中。我将 div 设置为 ，position:relative以便它不会中断其余文档内容的流程。
<div style="position: relative">
<table style="width: 500px;">
<tr>
<td>Table Text</td>
</tr>
</table>
<div style="position: absolute; top: 0; left: 0; width: 500px; background: green;">
I am on TOP of the table!
</div>
</div>
回答by Justin Carroll
I agree with TJ - z-index is the way to go - using javascript and css/html will allow you to hide/show this "magic floating box" above the table.
我同意 TJ - z-index 是要走的路 - 使用 javascript 和 css/html 将允许您在表格上方隐藏/显示这个“神奇的浮动框”。
回答by Jake
<style>
#floatme{
position: absolute;
top: XXpx;
left: XXpx;
}
</style>
Just change the top and left variables.
只需更改顶部和左侧变量即可。
