Javier
Luis
ObsmurciaPosition absolute y relative
Este tip puede ser una tontería pero es algo que a simple vista no se tiene en cuenta.
Cuando usamos position absolute sabemos que la capa se mueve con las propiedades top,left, right y bottom, pero si la caja
contenedora tiene position relative el elemento se mueve en relación al tamaño de la caja y no de la página web.
Lo vemos por ejemplo para redondear capas o añadir sombras.
<div>
<h3>Hola!</h3>
</div>
div {
position:relative;
}
div h3 {
position:absolute;
top:0;
left:0;
}La diferencia de usar position relative la puedes ver en este pequeño gráfico.
Ver post
Comentar
nils#1 hace 856 días
Es curioso, desde hace mucho he intentado conseguir posicionar capas de esa manera sin saber bien cómo hacerlo realmente hasta que al final di con esta página con un tutorial de posicionar capas que me enseñó ese mismo truco y además de otros trucos interesantes.
Un saludo, Nils
DrSlump#2 hace 856 días
Buen apunte. En realidad cualquier tipo de posicionamiento (position) que no sea 'static' tiene ese efecto. Es decir, tanto 'absolute', como 'fixed' (no disponible en IE), como 'relative' crean un nuevo contexto contenedor.
Cabe recordar que para utilizar el método por defecto (útil cuando queremos sobre-escribir un estilo) podemos utilizar 'static'.
Ojo también con 'fixed', ya que este modo de posicionado siempre utiliza como referencia el viewport actual, es decir la parte visible en cada momento de la página web. Esto a veces puede llevar a equivoco cuando queremos posicionar algo relativamente a otro elemento.
Saludos
nils#3 hace 856 días
Perdón, pensé que se podian poner link con html, el enlace es este: Learn CSS Positioning in Ten Steps
Alex#4 hace 856 días
Para la posición "normal" que comentas, se tendría que usar la propiedad position: fixed (aunque a IE no le guste).
IceBeat#5 hace 856 días
Ostras muchas gracias por los tips, creo que son incluso igual de importantes que el post.
Welk#6 hace 849 días
Weno fixed a IE7 si le mola jejeje
IceBeat#7 hace 849 días
Shhhh IE7 shhhh :P
Welk#8 hace 846 días
Que le vamos a hacer si está en todos lados, aunque poco a poco . . . . , resignación
wydblog#9 hace 840 días
tan simple pero tan efectivo!
saludos,
Lucas.
IceBeat#10 hace 838 días
Ya ves @8
@wydblog jeje si.
jose ignacio#11 hace 838 días
WWW.INTERSOF18.CREARPHPNUKE.COM
nils#12 hace 788 días
Hay un pequeño problema al usar este método con IE, tanto en la versión 6 como en la 7 y es que parece ser que las capas que están posicionadas con relative en IE se mueven al redimensionar la ventana del navegador.
He encontrado algunas páginas donde se habla de este "bug" y no he encontrado ninguna manera de evitar este efecto tan raro.
Si alguien sabe alguna solución bienvenido sea :)
IceBeat#13 hace 788 días
@nils no tenia ni idea sobre ese mal!, podrías pasarme algún enlace?
nils#14 hace 788 días
Sip... http://agarrate.net/blog
Es un sitio que está en pruebas, pero se nota el efecto con IE6 y 7 al redimensionar el ancho de la ventana del navegador.
Cuando carga la página, sea cual sea el ancho de la ventana lo carga bien, pero al cambiar el ancho de la ventana la parte de arriba se mueve.
IceBeat#15 hace 787 días
Pues vaya faena, no tenia ni idea que ocurriera eso :S.
Emilio#16 hace 582 días
Gracias, me ha servido mucho ;)
Sobre el bug, no se si funcione pero tal vez si haces un Javascript que en onResize de la ventana cambie el CSS a otro valor y lo vuelva al correcto funcione. Digo, si al dibujarlo la primera vez lo hace bien...
Saludos y gracias de nuevo!
pablo#17 hace 420 días
Muy bueno, este post. Me acaba de sacar de un callejón al que no veía salida.
Gustavo#18 hace 348 días
¡Muy bueno!... Una solución simple para los problemas de divs absolutos al redimencinar la ventana del navegador. Lo estoy probando en IE7 y también me funciona bien, no me aparece el problema del que habla nils. ¿Lo habrán arreglado en alguna actualización de Microsoft en el transcurso de este tiempo?
adryi19#19 hace 247 días
yo mas que nada uso el absolute para fijar elementos en cierta posicion del conteneodr pero para estrucutura yo uso float es mas tengo menos problemas en hacer cross browser y mi diseño se ve bien tanto en IE 6 7 8 y firefox opera safari y este ultimo chrome saludos
Javier#20 hace 14 días
muy bien explicado, siempre que buscas cosas comoe sta se ban a terminos muy tecnicos, olvidan que si estas buscando esta clase de cosas es por que no saben,