给予 Cufóna 更高的 z-index

Question

我有一个有趣的目标，希望在您的帮助下能够实现。

我有这样的 HTML 结构：

                <li>
                    <span class="buttonHighlight"></span>
                    <a href="#buy" class="button">BUY NOW</a>
                </li>            

HTML + 一些 CSS 行给了我这个：

IMG 1 （见下文）

如您所见，span.buttonHighlight 与按钮本身重叠。现在，有趣的部分来了：该按钮是一个带有 cufonized 文本的简单锚标记，它有一些 CSS 样式，赋予它圆形按钮背景。 因此，我想要实现的是将 3 个元素（CSS 背景、cufonized 文本和突出显示）按以下顺序放置：

IMG 2（见下文）

到目前为止我尝试过的是分别针对每个元素： 为 span.buttonHighlight，CSS 驱动的背景/框为a.button 和 cufonized 文本为 a.button .cufon 。幸运的是，a.button .cufon 正确显示；你可以在FireBug中看到它：

IMG 3（见下文）

但是，添加优于span.buttonHighlight（100）z索引的z索引（101）并没有帮助，即突出显示仍然与文本重叠。

您可以在这里找到与此案例相关的所有 CSS 样式：pastie [dot] org/1478291
我真的非常感谢您提供的任何帮助和您的时间。

非常感谢！
克里斯

**PS。由于我不允许发布图像且只有 1 个超链接，因此我堆叠了以下 3 张图像：

https: //i.sstatic.net/Upe63.jpg：

Answer 1

z-index 仅适用于定位元素，您必须指定 postion:relative，即使这是默认值。试试这个：

span.buttonHighlight {
background: url(assets/images/button_highlight.png) no-repeat top center;
    z-index: 100;
    position: relative;
}

和

a.button .cufon { 
    z-index: 101;
    position: relative;
}