如何将 HTML 元素放置在另一个元素之上而不影响下面元素的布局？

一般来说，HTML布局是基于流程的。每个元素都定位在它前面的元素之后，或者在它的右侧，或者在它的下面。当然，有很多例外，您可以通过调整样式来实现，但即使如此，如果您更改某些内容的顺序，大多数内容都会围绕它“流动”并为其腾出空间。

但有时我会看到行为非常不同的东西，例如页面出现浮动在屏幕中间的“对话框”，它们不受其父级 div 尺寸的限制，也不会移位它们周围的其他布局元素。

我正在尝试找出一种方法来做类似的事情，但不完全相同。我有一个用于显示网格的表格（是的，实际上正确使用表格），并且我想将图像放置在其中一个网格单元格的顶部。我不能把它in单元格，因为它比单元格大，并且我不想拉伸网格，但我希望它始终显示在相对于网格的相同位置，即使浏览器窗口滚动或调整大小也是如此。

我认为必须有某种方法可以做到这一点。如果我将 ID 或类别放在其中之一上<TD>细胞，我如何创建一个<Image>这不属于<TD>甚至是<TABLE>它所属的，但总是将自己置于其之上<TD>单元格不移动任何东西或影响其布局？

为了扩展 CJGreen 和 Napolux 的建议，您仍然可以将图像放置在表格单元格中，但绝对定位。

[编辑] 由于定义表格单元格的位置被认为是非法的（因此被 Firefox 忽略），您可以将每个单元格的内容换行<td> in a <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/