Beginner question here. I am experimenting with z-index, but it doesn't seem to be functioning as expected. Below is the code snippet I am working with:
<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 my CSS, I have set a z-index of 1 for .description and 10 for .addtofavorites. #favoritelink includes a background image and text that is placed far off-screen (basically an image link). Despite this setup, the background of .description remains above the background of .addtofavorites.
I want the background of .addtofavorites to appear on top.
Here are the CSS styles for .addtofavorites and .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;
}