9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 266
1

Наложение картинок друг на друга

03.12.2019, 13:44. Показов 13051. Ответов 6
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Нужен код чтобы три картинки накладывались друг на друга(без css в head, а сразу в htmlтеги в style), я представляю себе это так:
HTML5
1
2
3
<img src="1.png" style="z-index:1;">
<img src="2.png" style="z-index:2;">
<a href="google.рф"><img src="3.png" style="z-index:3;"></a>
но почему то это не работает
в случае с ссылкой логичней вставлять индекс в тег <а> верно?
в итоге при одинаковом размере картинок должна получиться карточная колода с видимой только одной вверху картинкой
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.12.2019, 13:44
Ответы с готовыми решениями:

Наложение 2 изображений друг на друга
Мучался, мучался, сам не додумался, нужна помощь:) Есть 2 изображения, ну и обычный див блок,...

Наложение изображений друг на друга
Не получается наложить изображение 4.gpeg на logo.png. Второе изображение то что 4.gpeg просто...

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

наложение составляющих формы друг на друга
Добрый день. сделал форму, которая пошагово дает пользователю право выбора(см. скрин ниже). вот...

6
Эксперт JSЭксперт HTML/CSS
3826 / 2676 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
03.12.2019, 14:38 2
Лучший ответ Сообщение было отмечено Vetrox как решение

Решение

HTML5
1
2
3
4
<div class="deck" style="position:relative;">
  <img style="position:absolute; z-index:2" src="https://www.cyberforum.ru/customavatars/avatar313184_4.gif" alt="">
  <img style="position:absolute; z-index:1" src="https://www.cyberforum.ru/customavatars/avatar113815_12.gif" alt="">
</div>
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 266
03.12.2019, 14:44  [ТС] 3
только без div, картинки находятся внутри td

Добавлено через 1 минуту
этот див не выпрыгнет из таблицы?

Добавлено через 2 минуты
Работает, спасибо!
0
Эксперт JSЭксперт HTML/CSS
3826 / 2676 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
03.12.2019, 14:49 4
Я так бы не делал. Лучше завернуть в div, чтобы картинки позиционировались относительно него, а не таблицы
0
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 266
03.12.2019, 15:07  [ТС] 5
вообщем если див помещать в таблицу то картинки не отображаются вообще, отдельно конечно работает
а если свойства дива передать в td (style="position:relative;") то все работает, только img дружно смещаются выходя за рамки ниже примерно на 50% от размера ячейки, как их назад приподнять?
0
Эксперт JSЭксперт HTML/CSS
3826 / 2676 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
03.12.2019, 15:12 6
Указывайте позиционирование относительно relative-родителя: top, right, bottom, left
HTML5
1
  <img style="position:absolute; left:0; top:0; z-index:2" src="https://www.cyberforum.ru/customavatars/avatar313184_4.gif" alt="">
1
9 / 9 / 6
Регистрация: 08.10.2012
Сообщений: 266
03.12.2019, 15:27  [ТС] 7
состыковался!
0
03.12.2019, 15:27
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.12.2019, 15:27
Помогаю со студенческими работами здесь

Как сделать наложение друг на друга?
#AA2{ margin-left:10%; border-color: transparent transparent transparent red; border-style:...

Не могу исправить наложение дивов друг на друга
Доброго времени суток. Делаю табы вообщем. В блоке есть 4 блока с шириной, высотой (на фоне...

Выравнивание картинок относительно друг друга и окна браузера
Здравствуйте! Мне надо выровнять картинки (в моем случае 3 фотографии) относительно друг друга и...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru