Как создать три перекрывающихся слоя без использования «position» и «margins» - PullRequest
Новая
       5

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

1 голос
/ 07 января 2011

Я попал в беду.Это моя разметка: 

<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 внутри тега <img> без указания размеров.Кроме того, в будущем мне понадобятся alt-теги для SEO.
  2. Я не могу использовать position: relative и position: absolute, потому что #menuContent равен position: absolute.Его нужно расположить на странице, используя относительное позиционирование на любом из его контейнеров, просто уменьшая каждую деталь.
  3. Высота изображения неизвестна, поэтому я не могу использовать отрицательные поля.

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

screenshot 1

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

Эта ссылка jsFiddle содержит сокращенную версию разметки.

Ответы [ 2 ]

0 голосов
/ 10 января 2011

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

Демонстрация на jsFiddle

0 голосов
/ 07 января 2011

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

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

...