Как отобразить одно изображение поверх другого в файле CSS
С помощью CSS вы можете указать z-index элемента, который позволит вам «складывать» элементы «друг над другом» при рендеринге стиля в разметке.Например, вы можете назначить двум элементам одну и ту же позицию на странице, но разные значения z-index, и они будут расположены друг над другом.
Это часто используется вместе с float элемента или с абсолютным позиционированием , поскольку обычно текучие элементы обычно "толкают" друг друга относительно своего положения, а не абсолютно друг над другом. Пример здесь . Здесь много информации .
Есть несколько способов, но ключ использует позиционирование (например, position: relative) с z-индексами.
position: relative
Вот пример.
Это работает во всех основных браузерах. Проверьте это
<html> <head> <style> .search_customization-icon_icon { position: relative; margin-top: -40px; margin-left: 3px; width: 162px; height: 22px; display: block; background: url(http://Apparelnbags.com/skins/skin_1/images/anb_icon_sold-with-customization_icon.png) no-repeat center; } </style> </head> <body> <table> <tr> <td style="padding-right:5px;"> <span style="width:190px;height:235px;display: block;"> <a title="Alternative AA04 Ladies Rib Crew" href="http://www.apparelnbags.com/alternative/aa04-53-oz-rib-crew-t-shirt.htm"> <img src="http://images.apparelnbags.com/product/icon/AA04.jpg" style="position:relative;border:0"> <span class="search_customization-icon_icon"> </span> </a> </span> </td> </tr> </table> </body> </html>
Вы должны опубликовать дополнительную информацию, но, по крайней мере, взгляните на функциональность z-index в css здесь .Это должно очень помочь, если я правильно понимаю ваш вопрос.