给Cufón一个更高的z指数

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文本和Highlight）：

IMG 2（见下文）

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

IMG 3（见下文）

然而，添加一个优于span.buttonHighlight（100）的z-index的z-index（101）没有帮助，即Highlight仍然与文本重叠。

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

非常感谢你！ 克里斯

** PS。由于我不允许发布图像和仅1个超链接，我已经堆叠了下面的3张图片：

http://i.stack.imgur.com/Upe63.jpg：

Answer 1

z-index仅适用于定位元素，您必须指定position：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;
}