Table overlapping div

我想在頁面的底部放置一個表格，但只要調整窗口/瀏覽器的大小，它就會重疊上面的內容。當我把一張桌子放在頁面的頂部時，它不會重疊。Table overlapping div

有什麼建議嗎？在HTML

<div id="box">minimize/resize the window and the table will overlap my div...</div> 
<table id="tables" border="0" bgcolor="silver"> 
    <tr> 
    <td>My table</td> 
    </tr> 


#box { 
    position: absolute; 
    top:20px; 
    width:200px; 
    height:200px; 
    border: 1px solid black; 
} 

#tables { 
    position: absolute; 
    width: 100%; 
    bottom: 0%; 
    height: 30%; 
}

Here is my Fiddle

來源

2014-09-25 Gustaf

天然Z位置（外觀的文獻爲了position ED元素）：

<div>  >>> lower Z index 
<table> >>> higher Z Index therefore overlaps DIV

邏輯：

<table> 
</div> >>> DIV will now overlap Table

手動控制z-index屬性： demo

<div>  >>> z-index:1; >>> DIV will now overlap Table 
<table> >>> Lower Z index

來源

2014-09-25 00:34:15

謝謝羅科，它解決了它，我想實現的主要目標是使所有元素保持在他們所在的位置，而不管屏幕大小等。這解決了重疊問題，但我真的很想擁有它在任何時候都處於底部。我會繼續嘗試！謝謝。 – Gustaf 2014-09-25 09:36:53

@Gustaf谷歌比'粘腳'。我認爲那就是你的追求。 – 2014-09-25 12:23:56

請更新下面的代碼中CSS;

#box { 
position: ; 
top:20px; 
width: 100%; 
height:200px; 
border: 1px solid black; 
max-width:250px; /* or whatever width you want. */ 
display: inline-block; 
}

這裏，給寬度屬性爲100％和最大寬度屬性控制文本不盡快調整窗口/瀏覽重疊的內容。

來源

2014-09-25 00:42:12

謝謝，但這似乎並沒有解決它。底部的表格仍然與div盒重疊。 – Gustaf 2014-09-25 09:31:23

Table overlapping div

回答

相關問題