给 Cufón 更高的 z-index

Question

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

我有这个 HTML 结构：

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

HTML + 几行 CSS 给了我这个：

IMG 1（见下文）

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

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