如何在不影响下面元素的布局的情况下将 HTML 元素放置在另一个元素的顶部？

Question

一般来说，HTML 布局是基于流的。每个元素都定位在它之前的元素之后，要么在它的右边，要么在它的下面。当然，有很多例外情况，您可以通过使用样式来获得，但即便如此，如果您更改某些东西的顺序，大多数东西也会围绕它“流动”并为它腾出空间。

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

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

我认为必须有某种方法可以做到这一点。如果我在其中一个<TD>单元格上放置一个 ID 或类，我如何创建一个<Image>不属于<TD>或什至<TABLE>不属于它的<TD>单元格，但将始终将自身定位在该单元格的顶部而不替换任何内容或影响其布局的?

Answer 1

为了扩展 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/