5

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

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

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

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

4

3 回答 3

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/

于 2013-02-23T21:16:33.603 回答
1

如果你使用

table {position:relative;}

那么你可以使用：

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

这会将图像偏移到包含表中的特定位置，并将其从围绕它的表的其余部分流中取出。

于 2013-02-23T20:47:44.500 回答
0

如果我理解正确，您需要将offset属性与position:absolute.

绝对位置使您的图像脱离流程，偏移量可以为您提供要覆盖的元素的位置（问题中的 TD）。

有了偏移量（TD 页面左侧和顶部的 px），您可以将图像移动到正确的位置。

看这里：http: //jsfiddle.net/jrUsM/

jQuery 文档很好地解释了它。

于 2013-02-23T20:51:16.867 回答