Tengo una lista de imágenes en una tabla html y necesito superponer un icono pequeño en cada imagen. ¿Cómo podemos hacer esto usando el índice z y el posicionamiento?¿Cómo podemos superponer dos imágenes usando el estilo css?
ver aquí. http://jsbin.com/univa
<html>
<head>
<style type="text/css">
.under
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:40px;
top:10px;
z-index:-1;
}
</style>
</head>
<body>
<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
<img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />
</body>
</html>
agradable un ex ... :) –
Excelente pieza de magia css – Cid
Puede usar position:relative y establecer right:30px, bottom:30px, que lo desplazará hacia arriba y hacia la izquierda en 30 píxeles.
CSS:
.icon{
position:relative;
right:30px;
bottom:30px;
}
El elemento que desea ser en la parte superior tiene que tener un alto índice z
Así que el pequeño icono tendría un índice z de 2 y las imágenes serían tener un índice z de 1
Ejemplo:
.icon {
z-index: 2;
position: relative;
left: 30px;
top: 30px;
}
.images {
z-index: 1;
}
Aquí está una guía sobre usted puede utilizar z-index y aquí https://developer.mozilla.org/en/understanding_css_z-index
un artículo sobre el posicionamiento http://www.tizag.com/cssT/position.php
leyeron este puede haber ayuda que http://stackoverflow.com/questions/4863644/overlap-across-width-of-two-divs – digital