Как сделать изображение поверх других элементов css

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

На веб-странице расположены три изображения игральных карт (рис. 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

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

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

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

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

Как наложить две картинки на другую с помощью HTML-CSS?

Я искал несколько часов и не нашел решения своей проблемы.

Я хотел бы наложить две картинки на другую, несмотря на десятки руководств по этому поводу, я не собираюсь применять их в моем случае.

Я смог увидеть эти уроки, CSS имеет атрибут «z-index», который позволяет использовать фоновые изображения. Я также мог видеть свойство абсолютного и относительного положения, но я не уверен, что решение моей проблемы связано с этими свойствами.

Вот часть кода, в которой я хотел бы решить мою проблему:

Вот мой полный html-код:

Спасибо заранее за вашу помощь.

3 ответа

Если вы хотите наложить изображение поверх другого, вам просто нужно сделать так, чтобы второе изображение имело абсолютную позицию, а с помощью z-index определяло, какое из них будет наверху, например:

Вам нужно сначала создать элемент, который будет содержать ваши изображения. Например, это может быть div .

Этот элемент должен иметь position: relative . Поместите туда свои изображения с помощью position: absolute и установите top: 0; left:0 .

Затем вам нужно будет указать z-index , чтобы отображать одно поверх другого.

Таким образом, у вас будет что-то вроде:

И в вашем css, например:

Возможно, вы захотите использовать другие свойства, такие как width, height, overflow, display , чтобы получить желаемый результат.

Это очень распространенная вещь в HTML, и вам следует убедиться, что вы понимаете ее концепции (позиционирование и наследование css), поскольку это будет очень важно в дальнейшем.

На самом деле эти свойства — именно то, что вам нужно. Вот как их использовать. Допустим, у ваших изображений есть класс .overlay-img . Поместите их в контейнер с классом .img-container .

Теперь изображения должны быть друг над другом. Используя свойство z-index , вы также можете указать, какой из них находится наверху. Чем выше значение, которое вы укажете, тем выше будет отображаться элемент.

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

Как можно поставить картинку поверх другой? Возможно ли это сделать с помощью языка css? [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 1 год назад .

Я хочу поставить логотип на картинку,возможно ли это реализовать?

Картинку также можно задать блоком div с background-image .

Выравнивать можно через флексы и относительное позиционирование, а можно через абсолютное:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *