Как избавиться от разрыва с позицией: относительный баннер

Question

Какой рекомендуемый и самый элегантный способ избавиться от разрыва, вызванного положением: относительный?

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

См. Пример ( Я хочу, чтобы текст был чуть ниже красного поля ):

http://jsfiddle.net/Ru2CT/

Я знаю, что мог бы создать еще один относительный элемент div как родительский для моего текста, но тогда у меня все еще будет разрыв, но между разделом контента и нижним колонтитулом ...

Есть идеи? :)

Answer 1

Возьмите все содержимое серого поля и поместите его в элемент div (растянутый до одинакового размера). Затем переместите эту коробку вверх с положением: относительным. Это приведет к перемещению текста с помощью красной кнопки «слайдер» / баннера без перемещения серого фона.

Вот и мы: http://jsfiddle.net/4BLFJ/ [с анимацией и комментариями]

Answer 2

Я наконец-то решил эту проблему, просто:

   position: relative;
   bottom: 200px;
   margin-bottom: -200px;

Делает магию!:)

Answer 3

Отрицательная маржа была бы гораздо более элегантным решением в этой ситуации ( исправлено jsFiddle ).Обратите внимание, что мне пришлось переместить фон #eee в div # main, так как в противном случае он наложился бы на фон div # top.

Как общее практическое правило, я бы также рекомендовал избегать относительногопозиционирование, если в этом нет крайней необходимости, часто может привести к головным болям z-index в старых версиях IE.

Answer 4

Это не то, что вы просили, а один из двух способов сделать это:

Основная идея здесь - сделать баннер абсолютно позиционированным div (не абсолютно позиционированным на странице, хотя вы можете сделать это тоже; на самом деле это может быть и лучше).

Сначала установите область #content в положение: относительное, но НЕ изменяйте что-либо еще. Это создает новый контекст стека (дочерние элементы используют верхний / правый / нижний / левый и проценты относительно него).

Затем поместите баннер как дочерний элемент области #content и установите его следующим образом:

position:absolute;
width:80%; height:100px; /*there are other ways to set the height and width*/
bottom:100%; /*this puts it at the top*/
/*you can also use bottom:105% or bottom:90% or other things, or if you really
  want to use non-relative units like px, you can create a third nested div that is
  relatively positioned by whatever px amount*/