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

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 而不指定尺寸。此外，我将来某个时候需要 SEO 的 alt 标签。
2. 我不能使用position: relative 和position: absolute，因为#menuContent 是position: absolute。它需要定位 w.r.t.页面，在其任何容器上使用相对定位，只会将所有内容都向上。
3. 图像的高度未知，因此我不能使用负边距。

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

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

此jsFiddle link 包含标记的皮肤缩小版本。

Answer 1

如果不调用 position:absolute 将元素从流中取出并直接处理它，或者使用负边距在流中人为地推动内容，就无法做到这一点。 pos:abs 是正确的解决方案（背景图像实际上是正确的解决方案，但您必须有一个固定的大小），您唯一的机会就是使用它并修复后果。

这尤其不能用表格元素来完成，因为表格元素会花费太多时间而变得不可靠 - 它可能在你的待办事项列表中删除表格，但如果你有一个特定的问题，你需要修复特定的实例 现在。

Answer 2

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

Demo on jsFiddle