Question

Newb问题。我正在尝试使用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指定为10. #favoritelink的背景图像和文本偏离页面（它本质上是图像链接）。 .description的背景仍然位于.addtofavorites的背景之上。

我希望.addtofavorites背景能够占据首位。

这是.addtofavorites的css和.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

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

修改：http://jsfiddle.net/GndRj/4/ 根据您的代码，但在position: relative上添加了.favoritelink并减少了左边距，以便它显示在预览窗口中。

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

1 个答案: