Как наложить один div на другой?

@Durden_T · Регистрация: 01.11.2017

Студворк — интернет-сервис помощи студентам

В одном диве реализовывается анимация из библиотеки партиклз, а во втором диве идет текст и картинка. Мне нужно, чтоб первый див с анимацией был задним фоном, а второй див с текстом поверх него. Я поместил один в другой, все равно они идут попорядку.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="particles-js">
   <div class="container">
                    <h1>
                            <img class ="AnimateLogo"  src="assets/img/лог.png" width="200" height="200"/>
                    </h1>
                        <h2>ТЕКСТ</h2>
                           <p style="color:orangered;font-family:Arial;font-size:17px;">
                             ТЕКСТ ТЕКСТ
                           </p>
 
        </div>
 </div>

Получается что-то типа одного блока с анимацией, а затем ниже отдельный блок с текстом и картинкой. Как я понимаю, надо что-то добавить в стилях.

@Freeze_Breeze · 22.07.2018, 16:00

Durden_T, а кто Вам разрешил картинку помещать в тег <h1>?

@Freeze_Breeze · 22.07.2018, 16:07

Durden_T,

HTML5
1
2
3
<div class="foo">
    <div class="foo2"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.foo {
    width: 300px;
    height: 300px;
    background-color: #ff4b65;
    margin: 50px;
    position: relative;
    border: 3px solid #333;
}
 
.foo2 {
    width: 150px;
    height: 150px;
    background-color: #96d900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #333;
}

@Durden_T · 22.07.2018, 18:19 **[ТС]**

Freeze_Breeze, а если вместо зеленого квадрата будет текст, то он получается накладывается со своей рамкой.

@Freeze_Breeze · 22.07.2018, 18:32

Durden_T, Ну смотрите, все что Вам нужно для накладывания одного блока на другой так это пара этих строк:
Родителю задаете: position: relative;
Дочернему элементу: position: absolute;
И уже свойствами top, left, right, bottom регулируете нужные Вам отступы у дочернего элемента.
Эти строки:

CSS
1
2
3
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

центрируют дочерний элемент внутри родительского.

Добавлено через 2 минуты

Сообщение от Durden_T

а если вместо зеленого квадрата будет текст, то он получается накладывается со своей рамкой.

Только для начала поместите этот текст в блок и задайте блоку нужные размеры иначе текст вылезет за рамки родителя

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	22.07.2018, 16:00
	Durden_T, а кто Вам разрешил картинку помещать в тег `<h1>`? 0

@Durden_T 1 / 1 / 0 Регистрация: 01.11.2017 Сообщений: 58
	22.07.2018, 18:19 [ТС]
	Freeze_Breeze, а если вместо зеленого квадрата будет текст, то он получается накладывается со своей рамкой. 0