Как наложить картинку на блок?
Самым простым и наиболее сопроводжаемым решением будет вложить картинку в блок и задать блоку position: relative; , а картинке position: absolute; .
Далее смещать картинку с помощью CSS-свойств left , right , top , bottom от соответствующей стороны блока в нужных вам единицах измерения.
#box < position: absolute; /* Просто для демонстрации */ width: 300px; height: 200px; background-color: #ccc; >#logo < position: relative; /* Просто для демонстрации */ left: 30px; top: 20px; right: 40px; > Отслеживать
ответ дан 25 дек 2016 в 17:08
Vadim Ovchinnikov Vadim Ovchinnikov
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
зачем изображение внутрь box если есть уже обертка header? Зачем box абсолют, если изображение нужно наложить на блок. И это «Самым простым . «
25 дек 2016 в 17:11
@user3178479 Можно изображение не внутри box , я просто показал сам принцип. И это действительно самым простым способом. И я бы также больше склонялся к отрицательным margin если это подходит.
Наложить цвет на картинку как правильнее всего?
В гугле ответы есть, но большинство из них старые и возможно сейчас не совсем актуальны.
Задача такая, наложить полу прозрачные бекграунд по верх картинки и при наведении менять цвет этого бекграунда.
- Вопрос задан более трёх лет назад
- 17317 просмотров
Комментировать
Решения вопроса 3
Ivan Stroykin @StivinKing
Как с помощью CSS наложить элементы друг на друга
При разработке веб-дизайна часто нужно сделать так, чтобы два элемента перекрывались или полностью накладывались друг на друга. В CSS это можно реализовать с помощью свойства position и Grid.
Способ 1. Использование свойства Position
Свойство position со значением absolute разместит абсолютно позиционированный элемент на странице. В этом случае указывается позиция элемента относительно левого верхнего угла веб-страницы.
.child
При добавлении других элементов первый будет смещаться вниз. Это можно исправить, установив для родительского элемента position: relative. Тогда все дочерние элементы с position: absolute будут размещены абсолютно относительно верхнего угла родительского элемента.
.child < /* . */ position: absolute; top: 0; left: 0; >.parent
Также этот подход можно использовать для размещения одного элемента поверх другого. Например, два дочерних элемента, расположенных друг над другом, один из которых будет смещен на 150 пикселей. Они располагаются в одном родительском элементе и остаются внутри него.
.child < position: absolute; top: 0; >.child-1 < left: 0; >.child-2 < left: 150px; >.parent
Способ 2. Использование CSS Grid
Еще одним способом наложения элементов друг на друга является использование CSS Grid. Но эта технология поддерживается не всеми старыми браузерами.
С помощью Grid мы можем разместить элемент внутри контейнера следующим образом:
.parent < display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr; >.child < grid-area: 1 / 1 / 2 / 2; >
И если один элемент должен накладываться на другой, то нужно поместить их в одну область сетки. Давайте также немного сместим элемент, используя отступ.
.parent < display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 150px 1fr; >.child < grid-area: 1 / 1 / 2 / 2; >.child-2
Для облегчения позиционирования я создал CSS Grid Generator, который поможет вам визуально сконструировать необходимый макет.
Описанные выше методы позволяют накладывать элементы, создавать слои, управлять смещением элементов и их расположением на любой веб-странице.
Как наложить один div на другой?
В одном диве реализовывается анимация из библиотеки партиклз, а во втором диве идет текст и картинка. Мне нужно, чтоб первый див с анимацией был задним фоном, а второй див с текстом поверх него. Я поместил один в другой, все равно они идут попорядку.
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>
Получается что-то типа одного блока с анимацией, а затем ниже отдельный блок с текстом и картинкой. Как я понимаю, надо что-то добавить в стилях.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу).
Наложить div на другой
Здарова. Прошу вашей помощи. Нужно наложить слой "див" на другой. На страничке мной созданной есть.
Как наложить div на div?
Скажите пожалуйста как наложить div на div, например первый div у меня главный и относительно его.
На «главный» div наложить другой с навигацией
Здравствуйте! Столкнулся с проблемой наложения div’ов друг на друга. Нужно на "главный" div.