CSS с использованием отрицательной относительной проблемы позиционирования

Question

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

z-index: -1;
position: relative;
top: -60px;

Это дает желаемый результат, но я получаю дополнительное пространство в 60 пикселей внизу.

Как мне очистить это дополнительное пространство?

Answer 1

Павел прав. margin-top: -60px; вместо top: -60px;. Другим возможным решением было бы установить для "mainbody" значение position: relative;, а затем использовать position: absolute; bottom: 60px; в нижнем колонтитуле - хотя это странное значение означает, что нижний колонтитул необходимо перемещать внутри "основного тела" хотя до тех пор, пока родительский элемент нижнего колонтитула работает с «mainbody», вы можете использовать этот же трюк для этого элемента.

Answer 2

«Дополнительное» пространство внизу - это пространство, которое будет занимать нижний колонтитул. Относительно расположенные элементы по-прежнему занимают одно и то же место в макете страницы, даже если они появляются где-то еще.

Вы можете попробовать отрицательное нижнее поле на вашем теле. Это может означать, что вам не нужно top: -60px; в нижнем колонтитуле.

Answer 3

Вы все еще можете использовать:

position: relative;
top: -60px;

для нужного вам раздела, но установите

margin-top: -60px;

к разделу, который появляется далее. В данном случае - нижний колонтитул.

Answer 4

Не совсем прямой ответ на ваш вопрос, но в зависимости от того, что вы хотите отобразить за основным контентом, вы можете просто подделать его.

Если это изображение, вы можете просто поместить его в html {} или body {} (или в div, который инкапсулирует весь контент) и выровнять его по низу.

Answer 5

Один из способов добиться этого - поместить div в другой, absolute позиционированный div, чтобы он был удален из потока документов.

Answer 6

другое решение для этого:

z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;

top создает дополнительное поле, а margin-bottom удаляет его

по какой-то причине у меня только h tag. отрицательная маржа-вершина не работает