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

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 放在后台。图像的高度可能会有所不同，因此我必须在 标记内使用 header.gif，而不指定尺寸。此外，我将来会需要 SEO 的 alt 标签。
2. 我无法使用 position:relative 和 position:absolute，因为 #menuContent 是 position:absolute。它需要在页面上定位，在其任何容器上使用相对定位只会将所有内容都重新定位。
3. 图像的高度未知，因此我不能使用负边距。

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

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

此 jsFiddle 链接 包含标记的精简版本。

Answer 1

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

对于表格元素尤其不能这样做，因为表格元素需要太多的破坏才能变得不可靠 - 它可能在您的待办事项列表中以删除表格，但如果您遇到特定问题，您需要立即修复特定实例嗯>。

Answer 2

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

jsFiddle 上的演示