Question

一般来说，HTML布局是基于流的。每个元素都位于它之前的元素之后，或者在它的右边或者在它之下。当然，有很多例外，你可以通过玩风格来获得，但即便如此，如果你改变了某些东西的顺序，大多数东西都会围绕它“流动”并为它腾出空间。

但偶尔我会看到表现得非常不同的事情，比如出现在屏幕中间漂浮的“对话框”的页面，这些页面不受他们所居住的div的维度的限制。不要替换它们周围的其他布局元素。

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

我认为必须有某种方式可以做到这一点。如果我在其中一个<TD>单元格上放置了ID或类，如何创建不属于<Image>甚至属于<TD>的{{1}} <TABLE> to，但总会将自己定位在<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），您可以将图像移动到正确的位置。