如何在不使用「位置」和「邊距」的情況下創建三個重疊圖層

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

我的目標是定位頭-940x60.gif圖像，使其顯示爲header_row1和後面的背景。但這裏是我不能做的：

1. 我不能把header.gif放在後臺。圖片的高度可能會有所不同，因此我必須在<img>標籤內使用header.gif而不指定尺寸。除此之外，我還需要在未來的某個時候使用alt標籤。
2. 我不能使用position: relative和position: absolute，因爲#menuContent是position: absolute。它需要定位在w.r.t.這個頁面，使用它的任何容器上的相對位置，只是讓每一個東西都起作用。
3. 圖像的高度未知，因此我無法使用負邊距。

請指點實現無相對定位以下結果最好的方法：

PS：在截圖中，你會發現彈出菜單中沒有與左邊對齊其觸發。這是主要問題。

This jsFiddle link contains a skinned down version of the markup。

Answer 1

我用浮動來達到重疊的效果。第一個div浮動，然後width: 0，以便它不佔用任何空間，但仍顯示內容（如果需要，添加overflow: visible）。由於div不佔用任何空間，所以兩張表（或者如果您選擇的話，div將會出現在圖像上）。清除div確保所有剩餘內容出現在以下的背景圖像div。

Demo on jsFiddle

Answer 2

如果不調用任一位置，則無法完成：絕對將元素從流中取出並直接處理，或使用負邊距人爲地在內部流動內容。 pos：abs是正確的解決方案（背景圖像實際上是正確的解決方案，但您必須擁有固定大小），您唯一的機會就是使用它並修復後果。

這特別不能用表格元素來完成，因爲表格元素會花費太多時間來破壞以至於變得不可靠 - 它可能會在您的待辦事項列表中刪除表格，但是如果您有特定問題，則需要立即修復特定實例。