У меня есть заголовок, основной и нижний колонтитул. Заголовки и mainbody правильно оформлены. Теперь для нижнего колонтитула я хочу, чтобы он появился за основным, поэтому я использовал:
z-index: -1;
position: relative;
top: -60px;
Это дает желаемый результат, но я получаю дополнительное пространство размером 60 пикселей в нижней части.
Как очистить это дополнительное пространство?
Пол прав. margin-top: -60px; вместо top: -60px;. Другим возможным решением было бы установить "mainbody" на position: relative;, затем использовать position: absolute; bottom: 60px; в нижнем колонтитуле, хотя это значение означает, что нижний колонтитул необходимо перемещать внутри "основного тела". хотя до тех пор, пока родитель нижнего колонтитула течет с "mainbody", вы можете использовать этот же трюк для этого элемента.
"Дополнительное" пространство внизу - это пространство, которое будет занимать нижний колонтитул. Относительно позиционированные элементы по-прежнему занимают одинаковое пространство в потоке макета страниц, даже если они появляются где-то еще.
Вы можете попробовать отрицательное нижнее поле на вашем основном корпусе. Вы можете найти это означает, что вам не нужно top: -60px; на нижнем колонтитуле.
Вы все еще можете использовать:
position: relative;
top: -60px;
для нужного раздела, но установите
margin-top: -60px;
в раздел, который появляется далее. В этом случае - нижний колонтитул.
Одним из способов достижения этого было бы поместить div внутри другого, absolute 'ly расположить div так, чтобы он был извлечен из потока документов.
Не совсем прямой ответ на ваш вопрос, но в зависимости от того, что вы хотите отображать за основным контентом, вы можете просто подделать его.
Если это изображение, вы можете просто поместить его в html {} или body {} (или div, который инкапсулирует весь контент) и выровнять его внизу.
другое решение для этого:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top создает дополнительный запас, а margin-bottom удаляет его
по какой-то причине для h tag только это сработало для меня. отрицательный margin-top не работает