como poner una imagen en una esquina de un div?

Otra vez yo jeje, van a decir que como enfado pero que le vamos a hacer les toco ser los afortunados a los que molestare por un buen tiempo jeje..

Me explico:
Hace dias visite una pagina en la que se abria una window modal para elegir colores y en la esquina superior derecha tenia un cruz para que se cerrara pero no parecia que fuera de la ventana si no mas bien un imagen que le fue colocada, quisiera saber si alguien tiene idea de como hacerlo y si me pudiese orientar.

Les dejo la direccion de la pagina donde vi esto por si sirve de algo: http://ajaxload.info/ la window modal aparece al poner el cursor en la caja de texto para seleccionar el color.

Bueno de antemano gracias y que tengan buen dia...=)

hay varios modos, pero en este usaron position:absolute y top y left para las posiciones

Código :

left:420px;
position:absolute;
top:-90px;

Oye pero conoces alguna forma de que la imagen se mueva con el scroll? es decir que si bajo el scroll tambien baje la imagen y si lo subo tambien suba, lo que pasa es que si lo muevo la imagen se queda donde mismo

Un elemento con position:absolute toma las coordenadas del primer elemento padre con position:relative que encuentre, por tanto, para que el "botón" se mueva con el resto del window modal, debes defininir su position a relative (es su valor por defecto, pero en este caso debes declararlo para que funcione)

No puedes usar top y left, ya que con position absolute, top y left se refiere a los bordes de arriba y la izquierda del navegador. Usa margenes (positivos y negativos) para ubicar la imagen con respecto a su elemento contenedor.

Código :

position: absolute;
margin: -10px 0 0 300px;

por ejemplo.

Ramm, estás confundiendo position:absolute con position:fixed. Aquel se posiciona respecto al primero elemento padre que no tenga position:static. En W3Schools pueden verlo

No, no estoy confundiendo nada.

Si usas position fixed, el scroll de la pagina no le afecta.

Pero si usas position absolute, y le pones top: 10px; left: 10px; tendras tu elemento posicionado a 10px de la esquina superior del navegador, ademas el scroll si le afecta.

Tambien afecta si el elemento al que le estas poniendo esa imagen esta en la parte de abajo de una pagina larga, si usas "top:10px;" segira saliendo a 10px del borde superior del navegador, no de su elemento contenedor.

Para hacer lo que el quiere, tiene que hacer lo que le puse. Position absolute, y margenes para posicionar la imagen. nada de top o left.

Por alguna razon, Firebug no está de acuerdo contigo Ramm
http://i46.tinypic.com/288d1w.png

Bueno checare todas la opiniones para asi ver cual me funciona mejor y gracias a todos por su interes.

De todos modos les aseguro que si no me sale aqui esatare de nuevo y si si me sale les dire que fue lo que use... =)

tribak escribió:

Por que el elemento padre tambien esta posicionado absolutamente, si no fuera asi no funciona, y ademas no hace falta, como se lo puse funciona.