CODEWITHSUNDEEP
htmlcssz-index
This_is_me
This_is_me

Reputation: 918

Overlapping li elements with background and z-index

I have a ul with tree list items in an horizontal view. All the list items have the same background image:

Background image is the same for all li

I want to overlap the background images so it looks like this:

This is what I try to accomplish

Here is my jsFiddle

CSS:

    div#menu ul li{
    height:30px;
    display: inline;
    list-style-type: none;
    width: 60px;
    background: url(https://i.sstatic.net/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>

It goes wrong with the z-index!

Upvotes: 10

Views: 8662

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you should first give at least position: relative to your list-items, otherwise z-index has no effect. then just use

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

so the labels will remain close together (this rule will be applied starting from the second <li> element)

Example fiddle : http://jsfiddle.net/Faffz/3/

Upvotes: 14

Related Questions