CSS, использующий проблему отрицательного относительного позиционирования
-
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.отрицательное поле сверху не работает