Como hago para poner una imagen tipo "sticker"

[AnsuR]

Hola gente que tal, queria saber como se puede poner los famosos "stickers" q se ven en muchas webs.

Asi como este:



Osea, lo quiero poner en cualquier parte de la pantalla, queria saber como lograrlo.

[javiro]

Para hacer eso tienes que crear un div vacio entre las etiquetas de body:

Código:

<div class="sticker">&nbsp;</div>

Y en la hoja de estilos definir la clase sticker, donde defines la imagen que quieres en el background (te recomiendo que sea un png por si quieres transparencias), defines el ancho y alto de la imagen con width y height, la propiedad posicition absolute para que el elemento flote y le das las coordenadas que quiereas con top y left, aunque podrias utilizar tambien right o bottom:

Código:

.sticker{
	background:url(stick.png);
	width:60px;
	height:60px;
	position:absolute;
	top:100px;
	left:300px;
}

Salud!

[AnsuR]

Claro ya intente eso, pero esto al cambiar de resolución de pantalla queda en el mismo lugar y se ve mal.
No se ve lo mismo en resolución 1024x768 que en 1280x1024.
Osea, al aplicarle una posición absoluta, el objeto queda ahí clavado.

No hay otra manera?

[AnsuR]

Mira para que veas.
www.riestrarentacar.com

la imagen es el logo iso.
proba en otra resolucion y fijate como queda.

[safe]

Añado un par de puntos a lo explicado por Javiro.

Primero: no hay obligacion de que sea un div vacio. De hecho si el sticker va a ser un enlace a otra pagina, lo correcto seria que uses un anchor text (Ej.: <a href="doc.htm">ver todos</a>). Para quitarle el texto y que solo quede la imagen deberias añadir los estilos display:block; y text-indent:-9999px;.

Segundo: Normalmente con la clase que te paso javiro, el sticker se posicionaria en relacion al cuerpo del html, pero si, por ejemplo, queres que se posicione en relacion al listado de tiendas, deberias ponerle el estilo position:relative; al contenedor del listado de tiendas.
Ejemplo

<div id="listado" style="position:relative;">
... CONTENIDO DEL LISTADO DE TIENDAS ...
<a href="#" class="sticker">Ver todo</a>
</div>

[safe]

Exactemte lo que te comentaba:
Deberias agregar el estilo position:relative; a #elegirnos y cambiar los estilos de #iso por estos:

#iso
background:transparent url(imagenes/logoiso.jpg) no-repeat 0 0;
height:100px;
position:absolute;
right:0;
top:0;
width:61px;
}

[AnsuR]

Que capooo, gracias safe, te pasaste. Hoy aprendí algo nuevo :)
Muchas gracias de verdad. Ahi quedo como yo queria :)