Как создать три перекрывающихся слоя без использования «позиции» и «полей»

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 и header_row2. Но вот что я НЕ МОГУ сделать:

1. Я не могу разместить header.gif в фоновом режиме. Высота изображения может меняться, поэтому я должен использовать header.gif внутри тега <img> без указания размеров. Кроме того, мне понадобятся теги alt для SEO в будущем.
2. Я не могу использовать position: relative и position: absolute, потому что #menuContent является position: absolute. Он должен быть размещен w.r.t. страница, используя относительное позиционирование на любом из своих контейнеров, просто переписывает все.
3. Высота изображения неизвестна, поэтому я не могу использовать отрицательные поля.

Пожалуйста, советы, лучший способ для достижения следующего результата без относительного позиционирования:

PS: На скриншоте вы увидите меню всплывающего окна не совпадает с левой стороны его вызывать. Это основная проблема.

Этот jsFiddle link содержит уменьшенную версию разметки.

Answer 1

Я использовал поплавки для достижения эффекта перекрытия. Первый div был размещен, а затем width: 0, чтобы он не занимал какое-либо место, но все же показывал содержимое (при необходимости добавьте overflow: visible). Поскольку div не занимает какое-либо пространство, на изображении будут отображаться две таблицы (или divs, если вы выберете). Очищающий div гарантирует, что все оставшееся содержимое появится ниже фоновое изображение div.

Demo on jsFiddle

Answer 2

Это не может быть сделано без использования какой-либо позиции: абсолютное, чтобы вывести элемент из потока и обработать его напрямую или использовать отрицательные поля, чтобы искусственно подтолкнуть содержимое вокруг потока. pos: abs - это правильное решение (ну фоновое изображение на самом деле является правильным решением, но вы должны иметь фиксированный размер), и ваш единственный шанс - использовать его и восстановить последствия.

Это особенно не может быть сделано с элементами таблицы, которые бы так сильно нарушали, чтобы стать ненадежными - в списке задач можно удалить таблицы, но если у вас есть конкретная проблема, вам нужно исправить конкретный экземпляр сейчас.