Как поместить блок в блок css

Как расположить 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-фреймворки