div浮動在桌子上

Question

我想獲得一個div浮在桌子上，所以它會在所有文本之上？

Answer 1

退房absolute positioning，也可能是z-index（儘管如果這是您唯一絕對定位的內容，您將不需要它）。儘管還有其他方法可以讓事情重疊，但這可能與您最相關。

很簡單的例子：

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

Answer 2

浮法這在文本

<style> 
    #floatme{ 
     position: absolute; 
     top: XXpx; 
     left: XXpx; 
    } 
</style> 

只要改變頂部和左側的變量。

Answer 3

我會將表格封裝在「定位」格中。我將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> 

Answer 4

我同意TJ-z-index是要走的路 - 使用javascript和css/html將允許你在表上方隱藏/顯示這個「魔術浮動框」。