pestañas superpuestas al div

[luisdevep]

Hola a todos, os llevo mucho tiempo leyendo, y en gran parte he aprendido mucho de vosotros.

Ahora estoy con una duda un poco novata, pero hacia tiempo que no tocaba CSS y bueno las cosas se olvidan, queria hacer un menu horizontal de pestañas, y ya lo tengo en gran parte hecho, pero para mejorar su visualizacion he pensando que podria ser buena idea "superponer" las pestañas al div principal, para crear efecto de "clip" . Espero explicarme, he estado investigando pero no he dado con la solucion.


A modo de ejemplo mostraros como es mi idea en la siguiente web: http://www.ucsaa.ca/ucsaa3/ , pero en mi caso en horizontal y un poco mas efecto de Superpueto, como si estuviese cogido con un clip.

Espero que me ayudeis o me citeis alguna referencia en la que me pueda apoyar. Muchas Gracias!!

[whitefeathers]

Hola, Luisdevep. Para superponer capas de emplea el z-index y se juega con las posiciones "relativas" y "absolutas". Te pongo un ejemplo:

http://jsfiddle.net/64M3k/

Código HTML:

<div class="contenedor">
    <div class="arriba">Yo estoy arriba</div>
    <div class="abajo">Yo estoy abajo</div>
</div> 

Código:

.arriba {
   position: absolute;
   width: 100px;
   height: 100px;
   color: #fff;
   z-index: 2;
   background-color: red;
   padding: 10px;
}

.abajo {
    position: absolute;
    z-index: 1;
    width: 150px;
    left: 50px;
    color: #fff;
    padding: 10px;
    right: -20px;
    background-color: orange;
    text-align: right;
}

[luisdevep]

Muchas Gracias !!!!!