Как разместить два изображения в одном месте

Топвизор

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

Видно только одно изображение, поскольку второе изображение находится под первым.

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

Но прежде всего мне нужно собрать изображения одинакового размера в одном месте.

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

 
<svg><canvas></canvas></svg>

Код (разметка): , когда кнопка не нажата, я вижу только svg

  <canvas><svg></svg></canvas>

Код (разметка): какое свойство CSS мне следует использовать?

VanisH1

Я ничего не знаю о Canvas или SVG, но вы можете попробовать абсолютное позиционирование (не всегда рекомендуется, но, вероятно, это для вас верный вариант):

 
position: absolute;

Код (разметка):

aksenova.rima

В случае с не является допустимым дочерним тегом, так что он будет сломан/нефункционален/ничего не сделает.

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

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

Я бы оставил хотя бы один из них статическим или относительным, чтобы у вас был элемент в потоке, поместив только позицию: абсолютную на один из них. Имейте в виду, что оба элемента являются элементами «типа рендеринга», и нет никакой гарантии, что они вообще будут подчиняться z-индексу.

отчасти поэтому я, вероятно, НИКОГДА даже НЕ РАССМАТРИВАЮ о попытке взаимодействия этих двух в первую очередь.

хотя, по общему признанию, раздутый крушение поезда с медленным расходом заряда батареи, формат SVG на самом деле не так уж и высок в моем списке «использовать его на веб-сайтах». Обычно именно поэтому я сокращаю лишнюю пропускную способность и вместо этого использую .png с двойным разрешением.

Точно так же, как crApple поступила со своими иконками пользовательского интерфейса, когда поняла, что SVG не готов к использованию в прайм-тайм в сценарии использования в реальном времени.

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

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

вот почему холст, как элемент, обновляемый не в реальном времени, является чем-то вроде /fail/ в Веб-разработка.

Похожие темы	Дата
Можно ли быть дизайнером без образования?	19.10.2024, 18:10
Подскажите курсы фотошопа в Спб	19.10.2024, 18:10
Импорт из ArchiCAD в 3D MAX	19.10.2024, 18:10
Мне нужна помощь с простым домашним заданием по HTML. [Теперь решено, администраторы, пожалуйста, удалите тему. Спасибо за сотрудничество.	19.10.2024, 18:10
Я внес изменения в МЕТА и контент на своей индексной странице, и это сломало сайт.	19.10.2024, 18:10
SSL-сертификаты помогают или разрушают новые блоги	19.10.2024, 18:10
как последовательно постепенно появляться и исчезать изображения одно за другим - очень хлопотно	19.10.2024, 18:10
Является ли SEO для блогов эквивалентом ракетостроения?	19.10.2024, 18:10
Создать шаблон/тему для Codeigniter	19.10.2024, 18:10
Список тем, созданных конкретным пользователем на форуме x bbpress	19.10.2024, 18:10

Как разместить два изображения в одном месте

Топвизор

VanisH1

aksenova.rima

I AM

Интересно