如何在不使用“位置”和“边距”的情况下创建三个重叠图层

Question

我遇到了麻烦。这是我的标记：

<div class="header_wrap">
    <div class="header_row0"><img src="header-940x60.gif"></div>
    <table class="header_row1">
        <tbody>
            <tr>
                <td><a href="/">Home</a></td>
                <td><a id="menuTrigger" href="#">More</a>
                    <ul id="menuContent" class="easymenu">
                        <li><a href="/link1.html">Link 1</a></li>
                        <li><a href="/link2.html">Link 2</a></li>
                    </ul></td>
            </tr>
        </tbody>
    </table>
    <table class="header_row2">
        <tbody>
            <tr>
                <td><a href="/link3.html">Link 3</a></td>
                <td><a href="/link3.html">Link 4</a></td>
            </tr>
        </tbody>
    </table>
</div>

总结一下，header_wrap中有三个项目：

1. header_row0
2. header_row1
3. header_row2

我的目标是定位header-940x60.gif图片，使其显示为header_row1和header_row2后面的背景。但这是我不能做的：

1. 我不能将header.gif放在后台。图像的高度可能会有所不同，因此我必须在<img>标记内使用header.gif而不指定尺寸。此外，我将来的某个时候需要使用alt标签。
2. 我无法使用position: relative和position: absolute，因为#menuContent为position: absolute。需要定位w.r.t.页面，在任何容器上使用相对定位只是为了srcews。
3. 图像的高度未知，因此我无法使用负边距。

请在没有相对定位的情况下建议获得以下结果的最佳方法：



PS：在屏幕截图中，您会注意到弹出菜单未与其触发器的左侧对齐。这是主要问题。

此jsFiddle link包含标记的蒙皮版本。

Answer 1

如果不调用任何一个位置就不能这样做：绝对可以将元素从流中取出并直接处理它，或者使用负边距来人工推送流内的内容。 pos：abs是正确的解决方案（背景图像实际上是正确的解决方案，但你必须有一个固定的大小），你唯一的机会就是使用它并修复后果。

这尤其不能用表格元素来完成，这些元素会因为变得不可靠而破坏 - 可能在你的待办事项列表中删除表格，但是如果你有特定的问题则需要修复特定的实例现在

Answer 2

我使用浮动来实现重叠效果。第一个div浮动然后width: 0，以便它不占用任何空间但仍显示内容（必要时添加overflow: visible）。由于div不占用任何空间，因此两个表（或者如果您选择的div）将出现在图像上。清除div确保所有剩余内容显示在下面背景图像div。

Demo on jsFiddle