html - 绘制浮动图像 HTML CSS

Question

我想用 HTML/CSS 绘制一个“浮动”在主要内容之上的图像。该位置必须相对于表格。目前我正在尝试这个：

<table>
  <tr><td><img class="float" src="..." />Table Heading</td></tr>
<table>

CSS 样式有：

position:relative;
top:10px;
left:10px;

图像本身非常大（就尺寸而言）。代码正确定位图像，但问题是表格单元格变得非常大（大到足以容纳图像）。我希望图像漂浮在桌子上方并且不影响桌子的大小。如果我将位置更改为绝对位置，表格单元格不会扩展，但图像将相对于屏幕定位，这是我不想要的。

所以我想知道在 HTML 中绘制相对于表格的浮动图像的正确方法是什么？

任何帮助，将不胜感激。

score 2 · Accepted Answer

将表格上的位置设置为相对位置，将图像上的位置设置为绝对位置。这样图像的绝对位置将相对于表格，而不是文档。

.float {
    position:absolute;
    top:10px;
    left:10px;
}
table {
    border:1px solid #999;
    position:relative;
    top:100px;
}

1 回答 1