Почему значок не отображается сверху?

Question

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

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

HTML:

<div class="icon"> 
    <img src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" onmouseover="this.src='http://lolhit.com/img/ups/98581662041324299463.jpeg'" onmouseout="this.src='http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif'" /> 
</div> 

CSS: .icon { background: url(http://loosewire.org/wp-content/uploads/blue-icon-transparent-background-500px.png) no-repeat center; display: inline-block;
}

Я также сделал скрипку, и просто быть ясно, что это .icon, что я хочу быть на вершине вообще раз, с полем, имеющим возможность изменить изображение при наведении: http://jsfiddle.net/baardkolstad/2L44J/

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

Answer 1

Хорошо, мое окончательное решение для этого состояло в том, чтобы поместить значок в тег img и использовать две фотографии в качестве фона в CSS. Таким образом, у вас всегда есть значок, находящийся на вершине.

Спасибо за помощь по этому вопросу!

Answer 2

Я думаю, вы должны смотреть на использование Z-индекса здесь: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Примите к сведению, что это работает только на расположенных элементов (положение: абсолютная, позиция: относительная, или положение: фиксированный). Это также находится на приведенной выше веб-странице.