Q:

Adding an image over the image

I want to add an icon over the image. I am trying following, but it doesn't seem to work:
HTML:
<ul>
    <li>
        <div class="icon">
            <img src="image.jpg" />
        </div>
    </li>
</ul>

CSS:
ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    background : url("icon_quick.gif") no-repeat;
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

Demo:
http://jsfiddle.net/tqw4V/

A:

Here is one way to do it: http://jsfiddle.net/tqw4V/1/
Unfortunately, it requires modifying your markup, but it works. The idea is to have the overlay image be a separate element that you position absolutely over your main element. This works a lot better if the main element is not, itself, absolutely positioned.
HTML:
<ul>
    <li>
        <div class="icon">
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
            <div class="overlay"></div>
        </div>
        </li>
</ul>

CSS:
ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 4;
}
}

