Cufón에게 더 높은 Z- 인덱스를 부여하십시오

Question

나는 당신의 도움으로, 성취 될 수있는 흥미로운 목표를 가지고 있습니다.

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

HTML + 몇 CSS 라인이 저에게이 주시는 :

당신이 볼 수 있듯이

IMG 1,

(아래 참조) 범위를

나는이 HTML 구조 . 버튼 하이라이트는 버튼 자체를 겹쳐서 표시합니다. 자, 여기서 흥미로운 부분이 있습니다 : 버튼은 둥근 버튼 배경을 제공하는 몇 가지 CSS 스타일을 가진, cufonized 텍스트가있는 간단한 앵커 태그입니다. 따라서, 나는,이 순서로 3 개 요소 (CSS 배경, cufonized 텍스트 강조) 가하고 무엇을 달성하고자하는 :

IMG 2

는 지금까지 시도했다 (아래 참조) <span class="buttonHighlight"></span>로 span.buttonHighlight, a.button 과 CSS 기반의 배경/상자 .cufon a.button로 cufonized 텍스트 : 별도로 각 요소를 목표로하는 것이었다. 다행히 a.button .cufon이 제대로 표시되고 있습니다. 당신은 방화범을 볼 수 있습니다

IMG (3) 그러나

(아래 참조), 도움이되지 않았다 span.buttonHighlight의 Z- 인덱스 (100)보다 우수하다 (101)는 Z- 인덱스를 추가 즉 하이라이트가 여전히 텍스트를 겹쳤습니다.

이 경우와 관련된 모든 CSS 스타일을 찾을 수 있습니다. pastie [dot] org/1478291
정말로 제공되는 도움에 감사드립니다.

정말 고마워요!
크리스

** PS. 제가 이미지를 게시 할 수 없습니다입니다 만 1 하이퍼 링크, 내가 다음의 3 개 가지 이미지를 적층 한 이후 :

http://i.stack.imgur.com/Upe63.jpg : 심지어 상대 : 단지 위치 요소에서 작동

Answer 1

Z- 인덱스, 당신이받은 위치를 지정해야합니다 이것이 기본값 인 경우. 이 시도 :

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