पृष्ठभूमि और जेड-इंडेक्स

Question

के साथ ली तत्वों को ओवरलैप करना मेरे पास एक क्षैतिज दृश्य में पेड़ सूची आइटम के साथ ul है। सभी सूची आइटम एक ही पृष्ठभूमि छवि:

यहाँ मेरी jsFiddle

है:

मैं पृष्ठभूमि छवियों ओवरलैप करना चाहते हैं तो यह इस तरह दिखता है सीएसएस:

div#menu ul li{ 
    height:30px; 
    display: inline; 
    list-style-type: none; 
    width: 60px; 
    background: url(http://i.stack.imgur.com/adwVj.jpg); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    padding-right: 5px; 
    padding-left:30px; 
    z-index:2;   
} 

div#menu ul li:first-child{ 
    padding-left:20px; 
    z-index:3;    
} 
div#menu ul li:last-child{ 
    padding-left:35px;  
    margin-left:-30px 
    z-index:1;  
} 

HTML:

<div id="menu"> 
     <ul> 
      <li>Account</li> 
      <li>Registreren</li> 
      <li>Winkelwagen</li> 
     </ul> 
</div> 

यह z- सूचकांक के साथ गलत हो जाता है!

Answer 1

आपको सबसे पहले अपनी सूची-वस्तुओं में कम से कम position: relative देना चाहिए, अन्यथा z-index का कोई प्रभाव नहीं पड़ता है। फिर बस

div#menu ul li + li { 
    left : -20px; 
} 

उपयोग करती हैं इसलिए लेबल करीब एक साथ (इस नियम दूसरा <li> तत्व से शुरू लागू किया जाएगा) रहेगा

उदाहरण बेला: http://jsfiddle.net/Faffz/3/