Перекрывающиеся div, абсолютно относительные? - PullRequest
Новая
       4

Перекрывающиеся div, абсолютно относительные?

1 голос
/ 03 марта 2010

Тема WordPress, над которой я работаю, имеет заголовки, которые охватывают всю область контента.

Эти заголовки перекрываются боковой панелью, которая абсолютно расположена на 100% ширины.

Проблема в том, что когда содержимое боковой панели превышает содержимое страницы, оно растягивается вне моей оболочки поверх нижнего колонтитула, не заставляя его опускаться (потому что оно абсолютно и ничто иное).

Итак, мой вопрос: как можно было бы сделать абсолютно позиционированный div, стать относительным и по сути "толкнуть" мой нижний колонтитул, или есть лучший способ сделать это?

Кроме того, если у кого-нибудь есть примеры того, как это было сделано, было бы здорово!

редактирование:

Боковая панель абсолютно расположена, поэтому она может лежать поверх боковой панели. У меня нет онлайнового примера, так как я делаю настройку локального сервера, все остальное относительно позиционно и, скорее всего, всплыло.

Пример изображения:

http://imagecheese.com/gallery/stackquest.png

Ответы [ 2 ]

2 голосов
/ 03 марта 2010

В теории вы правы. Делая это position: relative должен возобновить нормальный поток, который бы сдвинул нижний колонтитул. Тем не менее, возможно, была веская причина, почему это было сделано absolute во-первых.

0 голосов
/ 06 марта 2010

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

Похоже, я могу использовать float, чтобы перекрывать заголовки сообщений, и использовать предложение clear:both; wordpressapi, чтобы заставить нижний колонтитул опускаться. Иногда решение слишком простое:)

Вот мой (ужасно цветной) пример: 

<html>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;background:#000;">
<div id="wrap" style="width:1005px;margin:0 auto;background:#003">
  <div id="header" style="height:280px;width:100%;background:#C9C;"></div>
  <div id="sidebarwrap" style="width:330px;height:100%;background:#09F;float:right;margin:0 42px 0 0;opacity:0.9;">
    <ul id="sidebar"><li style="height:1250px;"></li></ul></div>
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div>
  <div id="thecontent" style="width:550px;background:#909;margin:0 0 0 42px;"></div><br /><br /><br /><br />
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div><br /><br /><br /><br />
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div><br /><br /><br /><br />
  <div id="title" style="width:100%;height:122px;background:#C3C;"></div><br /><br /><br /><br />
  <div id="footer" style="width:100%;height:400px;background:#90C;clear:both;position:relative;"></div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...