html - 如何在不使用 "position"和 "margins"的情况下创建三个重叠层

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 是正确的解决方案(嗯，背景图像实际上是正确的解决方案，但你必须有一个固定的大小)，你唯一的机会就是使用它并修复后果。

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