浮动在桌子上的div [英] div floating over table

问题描述

我试图让一个div浮在一张表上，所以它会在所有文本之上？

解决方案

检查绝对定位，并可能 z-index （尽管如果这是你唯一绝对定位的内容，你将不需要它）。尽管还有其他方法可以让事情重叠，但这可能与您最相关。

非常简单的例子：

CSS：

  #target {
 position：absolute; 
 left：50px; 
 top：100px; 
 border：2px纯黑色; 
 background-color：#ddd; 
} 
  

HTML：

 < p>表格之前的东西< / p> 
< div id =target>我在表格顶部< / div> 
< table> 
< tbody> 
< tr> 
< td>表格中的文字< / td> 
< td>表格中的文字< / td> 
< / tr> 
< tr> 
< td>表格中的文字< / td> 
< td>表格中的文字< / td> 
< / tr> 
< tr> 
< td>表格中的文字< / td> 
< td>表格中的文字< / td> 
< / tr> 
< tr> 
< td>表格中的文字< / td> 
< td>表格中的文字< / td> 
< / tr> 
< / tbody> 
< / table> 
  

直播副本 | 源

I am trying to get a div to float over a table so it will be on top of all the text?

解决方案

Check out absolute positioning, and possibly z-index as 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.

Very simple example:

CSS:

#target {
  position: absolute;
  left: 50px;
  top: 100px;
  border: 2px solid black;
  background-color: #ddd;
}

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>

Live copy | source

这篇关于浮动在桌子上的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！