Cuando queremos superponer un contenido, puede mostrarse el contenido nuevo encima del contenido original, reteniendo información que no deseamos mostrar y quedando un efecto un poco feo. En esta entrada aprenderemos a superponer contenido con CSS, cambiando el contenedor por otro, por lo que el contenido original no se mostrará.
Esto puede hacerse con Javascript, pero no es necesario si podemos realizarlo sólamente con CSS. Haz click aquí para ver un ejemplo.
Cuando mueves el ratón encima del contenedor, un nuevo contenedor es mostrado encima del contenido existente. El truco está en usar posición relative para permitir que el contenido estático aparezca encima del contenido absolutamente posicionado.
Código HTML
La estructura HTML que se usó en el ejemplo anterior es esta:
<div class="infobox"> <img src="http://example.com/path_to_image.jpg"> <div>Here's what you have.</div> <div class="more">Here's more of a description of what we have going on here.</div> </div>
Código CSS
Este es el código CSS usado para crear el ejemplo:
.infobox {
position:relative;
border:1px solid #000;
background-color:#CCC;
width:73px;
padding:5px;
}
.infobox img {
position:relative;
z-index:2;
}
.infobox .more {
display:none;
}
.infobox:hover .more {
display:block;
position:absolute;
z-index:1;
left:-1px;
top:-1px;
width:73px;
padding:78px 5px 5px;
border:1px solid #900;
background-color:#FFEFEF;
}
La clase “infobox” está posicionada relativamente para permitir posicionar el contenedor “more” encima de “infobox”. La imagen está posicionada relativamente para poder aplicarle z-index (Un número mayor que el contenedor “more”).
Funciona sin fallos en Firefox, IE 7 y 8. En IE6 no funciona debido a que no es posible indicar :hovers en elementos que no sean vínculos (Mirad la entrada de bugs en IE para solucionarlo).
Aquí se muestra otro ejemplo para demostrar la idea usando una layout distinta para el contenido adicional.
Eso es todo, con esto ya podremos superponer contenidos con CSS.
Vía | Snook
