css - 如何让我的标签背景位于我的 div 背景之上？

Question

新手问题。我正在尝试使用 z-index，但它似乎没有按我预期的方式工作。这是我的代码:

<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>

在 css 中，我将 .description 的 z-index 指定为 1，将 .addtofavorites 的 z-index 指定为 10。#favoritelink 有一个背景图像和远离页面的文本(它本质上是一个图像链接)。 .description 的背景仍然位于 .addtofavorites 的背景之上。

我希望 .addtofavorites 背景位于顶部。

这是 .addtofavorites 和 .description 的 css:

.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

您必须使用 position: relative 或 position: absolute 才能使 z-index 正常工作。

编辑:http://jsfiddle.net/GndRj/4/ 根据您的代码，但在 .favoritelink 上添加了 position: relative 并减少了 margin-left，以便它显示在预览窗口中。