Elementos de li superpuestos con fondo e índice z

Tengo un ul con elementos de la lista de árboles en una vista horizontal. Todos los elementos de la lista tienen la misma imagen de fondo:Elementos de li superpuestos con fondo e índice z

Background image is the same for all li

Quiero superponer las imágenes de fondo por lo que se ve así:

This is what I try to accomplish

Aquí es mi jsFiddle

CSS:

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>

Se va mal con el índice z!

Fuente

2012-10-01 This_is_me

Es siempre una buena idea añadir algo de código en la pregunta también. No solo en el violín. – jurgemaister

gracias por la sugerencia, agregué el css y el html a mi pregunta –

Algunas veces no podemos abrir el violín. es mejor mantener el código en cuestión y proporcionar el enlace fiddle –

primero debe dar al menos position: relative a sus elementos de lista, de lo contrario z-index no tiene ningún efecto. a continuación, sólo tiene que utilizar

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

para que las etiquetas permanecerán juntos (esta regla se aplicará a partir del segundo elemento <li>)

Ejemplo violín: http://jsfiddle.net/Faffz/3/

Fuente

2012-10-01 09:41:29 fcalderan

ahaaa nice 1 mate .. –

gracias esto funciona! Tengo que esperar 3 minutos antes de que pueda aceptar esto awnser –

contento de ser útil :) – fcalderan

Elementos de li superpuestos con fondo e índice z

Respuesta

Cuestiones relacionadas