html - 如何在不影响下方元素布局的情况下将 HTML 元素放置在另一个元素之上？

Question

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

但偶尔我会看到一些行为非常不同的东西，例如带有漂浮在屏幕中间的“对话框”的页面，这些页面不受它们作为父级的 div 的尺寸的限制' 替换它们周围的其他布局元素。

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

我认为必须有某种方法可以做到这一点。如果我将 ID 或类放在 <TD> 之一上单元格，如何创建 <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 />'); 
});

在这里查看(更新的) fiddle - http://jsfiddle.net/teddyrised/qyu3g/