CSS, использующий проблему отрицательного относительного позиционирования

StackOverflow https://stackoverflow.com/questions/2280625

  •  21-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

Это было полезно?

Решение

Пол прав. margin-top: -60px; вместо top: -60px;.Другим возможным решением было бы установить для «основной части» значение 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;

верх создает дополнительное поле, а поле-дно удаляет его.

по какой-то причине у меня сработало только для тега h.отрицательное поле сверху не работает

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top