HTML : Разместить DIV внизу другого DIV’а
Задача:
внутри родительсткого разместить другой который должен располагаться справа, внизу.
Решение:
1. родительскому DIV’у обязательно ставим position: absolute или relative
2. диву что внутри ставим position:absolute;bottom:0;right:0;
2021-09-22 18:36 , author абобус
Вы только посетили наш сайт, КОММЕНТИРОВАНИЕ будет доступно через несколько минут.
возможно у Вас отключен javascript, если включен — просто обновите страницу
Как расположить элемент снизу в блоке css?
Но было бы легче просто разделить блоки, чтобы инпут пошел сразу после серого блока. А не был вложен в него.
Отслеживать
ответ дан 10 июн 2019 в 15:18
OPTIMUS PRIME OPTIMUS PRIME
27.1k 3 3 золотых знака 23 23 серебряных знака 48 48 бронзовых знаков
- html
- css
- bootstrap
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как закрепить div внизу страницы?
Мне нужно чтобы при перелистывании страницы div находился в закрепленном нижнем положении, т.е. всегда был на виду.
Применил такие стили:
bottom: 0; left: 0; padding: 10px; position: fixed; right: 0; text-align: left; z-index: 99;Проблема заключается в том, что div растянулся на всю ширину страницы, как исправить это?)
Как видно на фотографии слева у меня строчки меню, на которые залез этот div.
- Вопрос задан более двух лет назад
- 2672 просмотра
1 комментарий
Простой 1 комментарий
Позиционирование в CSS
Позиционирование — это расположение блока на странице. В HTML есть понятие потока вывода документа. Он описывает то, в какой последовательности браузер должен выводить и располагать элементы страницы.
За позиционирование в CSS отвечает свойство position. Бывает пять вариантов:
- static — обычное позиционирование по умолчанию.
- relative — вывод как обычно, но можно сместить элемент относительно самого себя или контейнера.
- absolute — элемент исключается из общего потока и располагается относительно родителя или корня документа.
- fixed — элемент исключается из потока и фиксируется на странице.
- sticky — вначале вывод как обычно, но потом фиксируется при прокрутке (скроллинг) страницы.
Обычное позиционирование это static, когда блоки выводятся последовательно друг под другом, как они объявлены в html-коде. Это значение по умолчанию.
Автор котиков: Lisa Zins
В Berry CSS используются готовые классы:
.pos-fixed < position: fixed; >.pos-absolute < position: absolute; >.pos-relative < position: relative; >.pos-sticky
Местоположение
Для элементов вне static положение может указываться с помощью свойств top , right , bottom , left . Это расстояние от верха, справа, снизу и слева соответственно. Например так:
.myBlock1 < top: 30px; >.myBlock2 < top: 10px; right: 30px; >.myBlock3 < bottom: 30px; right: 20px; >.myBlock4
Нюанс в том, что каждое позиционирование имеет свои особенности, поскольку от этого зависит точка отсчёта.
Relative и Absolute
Часто стоит задача произвольно разместить блок относительно контейнера.
Блок
✨ Скопировать код
Блок который нужно спозиционировать указывается как pos-absolute , а также его положение с помощью top/right/bottom/left . Но, есть нюанс — нужно ещё указать pos-relative у его родителя — то есть того блока, относительно которого выполнить позиционирование. Если этого не сделать, то браузер будет искать «родителя» контейнера до тех пор, пока не найдёт подходящего, вплоть до BODY .
При этом, заметь, ширина блока с pos-absolute автоматически будет установлена по его содержимому. Поэтому для такого блока можно указать свойства width/height , либо отступы padding .
Relative
Другая частая задача — сместить текущий блок относительно своей же позиции.
Какой-то блок
Блок, который нужно сместить
Какой-то блокБлок, который нужно сместить
✨ Скопировать код
Контейнер и ещё один блок я разместил только для наглядности — это блоки с обычным позиционированием. А для блока, который нужно сместить указываем pos-relative и значение top с отрицательным смещением (вверх) (для наглядности). Получилось, что блок окажется над тем, который выведен перед ним.
Z-index
Ещё одно свойство, которое влияет на позиционирование, только по оси Z (т.н. наложение слоёв). В этом примере мы видим, что нижний блок наложился на верхний и частично закрыл его. Но, что делать, если нужно наоборот?
Для этого и используется свойство z-index . Его значение — число (можно и отрицательное), которое показывает на сколько нужно сместить блок над остальными.
.z-index9
Но z-index может работать не во всех случаях, поэтому часто его сопровождают pos-relative без изменения через top/left. .
Какой-то блок
Блок, который нужно сместить
Какой-то блокБлок, который нужно сместить
✨ Скопировать код
Sticky
Это относительно новое свойство, которое позволяет фиксировать элемент при прокрутке. Вначале элемент выводится как обычный static, но когда он оказывается при скроллинге в области видимости, фиксируется и уже никуда не смещается.
Очень часто такое поведение используется на сайтах для фиксации верхней шапки. Посмотри этот пример в Berry Builder.
✨ Скопировать код
Класс bg-op20 создаёт черный фон с прозрачностью 20%.
Раньше для такой фиксации использовался JavaScript, сейчас же, это можно сделать на обычном CSS.
Fixed
Это позиционирование используется для полного вычленения блока из потока документа. Если для остальных свойств браузер резервирует место под блок, а потом его смещает, то с fixed браузер выводит блок вообще вне остальных элементов. Поэтому в таком варианте не будут работать margin/padding-оступы и некоторые другие свойства.
Fixed
✨ Скопировать код
Как правило такие элементы используются для постоянно видимой навигации. Например здесь по этому принципу сделана кнопка «Наверх ↑».
Классы Berry CSS
Примеры я привожу через style , чтобы ты не боялся использовать нужные свойства при вёрстке. Это из-за того, что часто приходится подбирать точные значения, для которых просто нет подходящих css-классов.
В Berry CSS по умолчанию мы можешь использовать такие варианты.
- .posXX-t — top: XX
- .posXX-r — right: XX
- .posXX-b — bottom: XX
- .posXX-l — left: XX
Где XX может быть: 0, 10, 20, 60, 80 (значения в px).
Для z-indexXX можно использовать значения: 1, 2, 9, 99, 999, 9999.
Обычно этого хватает, но если нет, то просто используй style .
Практика
Для закрепления сверстаем небольшой блок. Задача — разместить иконку справа в блоке заголовка.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, quam!
У заголовка мы указываем pos-relative , что как-бы задаёт точку отсчёта. А у иконки выполняем абсолютное позиционирование pos-absolute pos20-t pos10-r . Сможешь сам написать код? Представь себе, что это очередное задание от дизайнера.
ЗаголовокLorem ipsum dolor sit amet consectetur adipisicing elit. Neque, quam!
✨ Скопировать код
Задания
1. Сделай новую страницу о космосе на 10-20 абзацев (чтобы они занимали 2 экрана), где вверху расположи Sticky-меню после верхнего заголовка. Внизу размести блок подвала с Fixed, который будет всегда видимым.
2. В примере со Sticky текст после фиксирующегося блока оказывается поверх самого блока (вместо bg-op20 используй сплошной цвет, например bg-red ). Как сделать так, чтобы текст оказался внизу?
Нужно указать z-index у Sticky-блока.
3. Сверстай последний пример с иконкой только без позиционирования на flex-сетке.