Question

Newb question. I’m trying to use z-index, but it doesn’t seem to be working the way I would expect. Here’s my code:

<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
   Some description
</div>

In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.

I want the .addtofavorites background to be on top.

Here’s the css for .addtofavorites and for .description:

.description
{
    background:#efefef;
    width:600px;
    max-height:500px;
    padding:12px;
    z-index:1;
}
.addtofavorites
{
    background:url(img/plus.png) no-repeat center;
    background-size:75%;
    display:block;
    text-indent:-9999px;
    width:51px;
    height:56px;
    margin-right:6px;
    z-index:10;
 }

Answer 1

You have to use position: relative or position: absolute for z-index to work.

Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.