如何在不影響下方元素布局的情況下將HTML元素放置在另一個元素之上？

Question

一般來說，HTML布局是基於流的。 每個元素都定位在它之前或之后的右邊或下面。 當然，您可以通過使用樣式來獲得很多例外，但是即使那樣，即使您更改某些事物的順序，大多數事物也會在其周圍“流動”並為其騰出空間。

但是偶爾我會看到行為有很大的不同，例如浮在屏幕中間的帶有“對話框”的頁面，不受它們作為父對象且不會移位的div尺寸的限制他們周圍的其他布局元素。

我試圖找出一種方法來做類似但不完全相同的事情。 我有一張要用來顯示網格的表（是的，實際上是正確使用了表），我想將圖像放在一個網格單元的頂部。 我不能將其放在單元格中，因為它比單元格大，並且我不想拉伸網格，但是我希望它始終顯示在相對於網格的相同位置，即使瀏覽器窗口滾動或調整大小。

我認為必須有某種方法可以做到這一點。 如果我將ID或Class放在<TD>單元格之一上，該如何創建一個<Image> ，它不屬於<TD>甚至不是其所屬的<TABLE> ，但始終將其自身定位在<TD>單元的頂部，而不放置任何東西或不影響其布局？

Answer 1

如果您使用

table {position:relative;}

那么您可以使用：

table img {
    position:absolute;
    top: #px;
    left: #px;
}

這會將圖像偏移到包含表中的特定位置，並將其從圍繞它的表的其余部分中移出。

Answer 2

為了擴展CJGreen和Napolux的建議，您仍然可以將圖像放置在表格單元格中，但要絕對放置。

[編輯]由於定義表格單元格的位置被認為是非法的（因此被Firefox忽略），因此您可以將每個<td>的內容包裝在<div>元素中（最好使用JS，因此您不必進行大量更改）），然后將<div>位置設置為相對：

CSS：

table td > div {
    position: relative;
}
table td > div img {
    position: absolute;   
    z-index: 999;
}

JS：

$(document).ready(function() {
   $("td").wrapInner('<div />'); 
});

在這里查看（更新的）小提琴-http: //jsfiddle.net/teddyrised/qyu3g/

Answer 3

如果我正確理解它，則需要將offset屬性與position:absolute一起使用。

絕對位置使您的圖像脫離流程，偏移量可以為您提供要覆蓋的元素（問題中的TD）的位置。

具有偏移量（距TD頁面左側和頂部px），您可以將圖像移動到正確的位置。

在這里看： http : //jsfiddle.net/jrUsM/

jQuery文檔對此進行了很好的解釋。