1

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

我有这个 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>as 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
我真的非常感谢您提供的任何帮助和您的时间。

太感谢了！
克里斯

**附言。由于我不允许发布图片且只有 1 个超链接，因此我将以下 3 张图片堆叠在一起：

http://i.stack.imgur.com/Upe63.jpg： 替代文字

4

1 回答 1

0

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;
}
于 2011-01-19T20:54:11.237 回答