Как наложить блок на картинку css

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

https://jsfiddle.net/h3ufmj67/64/
Нужно было поверх картинки наложить несколько div
Использовал position, но теперь между двумя картинками появился отступ.
А картинки должны идти в стык.
Как поправить?

Вопрос задан более трёх лет назад
4580 просмотров

Комментировать
Решения вопроса 1

position: relative резервирует место в потоке

Обычно для родительского блока используют position: relative, а для внутреннего блока position: absolute.

В данном случае, мне кажется лучше отказаться от абсолютного или относительного позиционирования текста и сверстать например так.

Ответ написан более трёх лет назад
Нравится 3 2 комментария
Антон @anton99zel Автор вопроса

Виктория Шумская Может подскажите, как сделать, чтобы картинка не обрезалась ни по ширине, ни по высоте (сразу не заметил)?

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

JavaScript
+3 ещё

Как сделать ограничитель поля символов?

1 подписчик
2 часа назад
29 просмотров

Как наложить картинку на блок?

Самым простым и наиболее сопроводжаемым решением будет вложить картинку в блок и задать блоку 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 если это подходит.

Разметка HTML

Разметка довольно простая. Тег div служит для оборачивания картинки img и текста span.

    Уроки по программированию

Наложение в CSS

Задаем фиксированные значения ширины и высоты для div. Позиционирование у блока div относительное — это значит, что картинка и текст будут располагаться относительно блока.

Для тега img задаем ширину и высоту на весь размер родительского блока. Позиционирование относительное. Свойство object-fit: cover встроит картинку внутрь div. Если хотите, чтобы края у картинки не обрезались — сделайте размеры div равные размеры картинки img.

div < width: 600px; height: 500px; position: relative; >img < width: 100%; height: 100%; position: absolute; object-fit: cover; >span

Для текста также задаем абсолютное позиционирование. Свойства top, left, и transform отвечают за выравнивание. В коде мы выравниваем текст по центру.

Если необходимо выровнять по другому, тогда уберите свойство transofrm и задайте:

top: 0, left: 0 — левый верхний край
top: 0, right: 0 — правый верхний край
bottom: 0, left: 0 — левый нижний край
bottom: 0, right: 0 — правый нижний край

Вместо нолей можно задавать значения в пикселях. Например top: 50px — отступит от верхнего края 50 пикселей.

Warning: Undefined variable $aff_bottom_mark in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 53

Warning: Undefined variable $aff_bottom_info in /sites/codelab.pro/wp-content/themes/myTheme/dist/partials/post/post_base.php on line 57

Наложение и порядок слоёв

На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).

Карты рядом друг с другом

Рис. 3.51. Карты рядом друг с другом

Карты одна на другой

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Воображаемые координаты веб-страницы

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Порядок карт .card IMG < position: relative; >.seven < left: -120px; top: 25px; >.ace

В CSS за положением по Z-оси отвечает свойство z-index , которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index : 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

.card IMG < position: relative; >.three < top: 50px; left: 55px; z-index: 5; >.seven < left: -120px; top: 25px; z-index: 2; >.ace

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index , например 9999. Это гарантирует, что даже если в стилях и применяется z-index , он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover .

Пример 3.39. Изменение z-index при наведении на карту