Как расположить div поверх других блоков div?
Как расположить div поверх других блоков div? Чтобы было как на рисунке. Тот div, который нужен поверх других, выделен синим цветом (остальные — белые).
Отслеживать
задан 14 мар 2021 в 20:19
43 1 1 золотой знак 1 1 серебряный знак 8 8 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Используйте позиционирование CSS. В данном случае надо второму белому блоку задать свойство position: relative; , а синему блоку задать position: absolute; , чтобы он позиционировался относительно второго белого блока. Не забудьте указать top: 0; и left: 0; . Подробнее можно почитать здесь или здесь
Отслеживать
ответ дан 14 мар 2021 в 20:31
Daniil Kedrov Daniil Kedrov
564 1 1 золотой знак 5 5 серебряных знаков 12 12 бронзовых знаков
Как сделать блок внутри блока?
Как сделать блок внутри блока как показано на рисуне? float: left не помогает, тогда сверху остается ничем не заполенное пространство. Надо сделать так, чтобы блок 2 был вписан в блок 1.
На сайте с 13.04.2008
14 июля 2009, 20:23
так и делать — один див внутри второго дива а отступы через сцц указать религия не позволяет? слева 0, справа, верху и внизу по обстоятельствам
webamator (http://webamator.ru) приглашает потестить сервис бесплатной оптимизации CSS и JavaScript (http://service.webamator.ru/) Занимаюсь проектами любой сложности. Качественно. Дорого. Примеры некоторых работ (http://blog.webamator.ru/category/portfolio)
На сайте с 20.08.2006
14 июля 2009, 20:39
t3s:
так и делать — один див внутри второго дива
а отступы через сцц указать религия не позволяет? слева 0, справа, верху и внизу по обстоятельствам
Не позволяет. В блоках текст будет, и если сделать отсутпы, то и текст поплывет, а это неправильно.
На сайте с 03.03.2008
14 июля 2009, 20:40
1
2
1
1
2
1
Оно? P.S. Если не оно — тогда на счет текста подробней.
В чём разница? https://v-chem-raznica.ru
На сайте с 21.03.2009
14 июля 2009, 20:42
Для — задаёте габариты, — полностью в него вписывается, заполняя весь объём, что бы было, как на рисунке у вас примените к отступы margin 10px 0 0 0 (для примера)
На сайте с 20.08.2006
14 июля 2009, 21:00
Prior:
Оно?
P.S. Если не оно — тогда на счет текста подробней.
Не. Мне надо чтобы поле 1 с 2 страницами текста прерывалось бы блоком 2. Не вручную их разделять, а с помощью хтмл. Т.е. в 2 страницы текста вставить рекламу надо. _alk0g0lik_ добавил 15.07.2009 в 01:01
jack.sun:
Для — задаёте габариты, — полностью в него вписывается, заполняя весь объём, что бы было, как на рисунке у вас примените к отступы margin 10px 0 0 0 (для примера)
Два блока рядом друг с другом CSS
При формировании той или иной страницы на сайте иногда возникает необходимость создать колонки с тем или иным содержимым, которые находились рядом друг с другом. По умолчанию блоки не располагаются рядом друг с другом, а идут по порядку снизу.
Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.
Создание блоков в HTML
Для начала нам нужно создать в HTML два блока на нашей странице:
div id="block1">Текстdiv> div id="block2">Текстdiv>
Оформление блоков DIV рядом друг с другом по горизонтали
Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующие параметры:
#block1 float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; > #block2 float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; >
На выходе получим результат, как показано на изображении справа.
- float — можно придать значения «left» и «right«, фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся. Пример смотрите в конце статьи в созданном шаблоне.
- display: block; — выводит div блоком.
Дополнительные настройки
Остальные параметры носят декоративный характер:
- width — задаём размер блокам
- border — настраиваем границу блоков
- margin — внешние отступы, чтобы блоки не прилипали друг к другу
Примечание
Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.
Статьи по теме CSS
- Размер блока
- Оформление линий
- Оформление таблиц
- Выравнивание блока
- Два блока рядом
- Настройка ссылок
- Настройка фона
- Настройка шрифта
- Отступы
- Оформление картинок
- Галерея картинок
- Оформление кнопок
- Оформление списков
- Оформление иконок
- Курсор в CSS
- Навигационная панель
- Выпадающее меню
- Формы в CSS
- Вёрстка шаблона сайта
- CSS Flexbox
- CSS Grid
- Анимации и переходы CSS
- Медиа-запросы CSS
- CSS-препроцессоры
- CSS-фреймворки