Дайте Cufón более высокий z-индекс - PullRequest
Новая
       33

Дайте Cufón более высокий z-индекс

0 голосов
/ 19 января 2011

У меня есть интересная цель, которая, надеюсь, с вашей помощью будет достигнута.

У меня есть такая структура HTML: 

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

Этот HTML + несколько строк CSS дает мне следующее:

IMG 1 (см. Ниже)

Как видите, span.buttonHighlight перекрывает саму кнопку. Теперь перейдем к интересной части: кнопка представляет собой простой тег привязки с куфонизированным текстом, который имеет несколько стилей CSS, которые дают ему фон с закругленными кнопками. Следовательно, я хочу добиться того, чтобы 3 элемента (фон CSS, обрезанный текст и выделение) были расположены в следующем порядке:

IMG 2 (см. Ниже)

До сих пор я пытался нацеливаться на каждый элемент в отдельности: <span class="buttonHighlight"></span> как span.buttonHighlight , управляемый CSS фон / поле как a.button и окаймленный текст как a.button .cufon . И, к счастью, кнопка .cufon отображается правильно; Вы можете увидеть это в FireBug:

IMG 3 (см. Ниже)

Однако добавление z-индекса (из 101), превосходящего z-индекс span.buttonHighlight (100), не помогло, т. Е. Выделение по-прежнему перекрывало текст.

Вы можете найти все стили CSS, относящиеся к этому случаю, здесь: pastie [dot] org / 1478291
Я очень, очень ценю любую помощь и ваше время.

Спасибо большое!
Chris

** PS. Так как я не могу публиковать изображения и только 1 гиперссылка, я сложил 3 изображения ниже:

http://i.stack.imgur.com/Upe63.jpg: alt text

1 Ответ

0 голосов
/ 19 января 2011

z-index работает только с позиционированными элементами, вы должны указать postion: относительный, даже если это значение по умолчанию. Попробуйте это: 

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;
}
...