Vengador
IgNoRaO
IceBeatPosition 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 289 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 289 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 289 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 289 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 288 días
Ostras muchas gracias por los tips, creo que son incluso igual de importantes que el post.
Welk#6 hace 281 días
Weno fixed a IE7 si le mola jejeje
IceBeat#7 hace 281 días
Shhhh IE7 shhhh :P
Welk#8 hace 278 días
Que le vamos a hacer si está en todos lados, aunque poco a poco . . . . , resignación
wydblog#9 hace 272 días
tan simple pero tan efectivo!
saludos,
Lucas.
IceBeat#10 hace 271 días
Ya ves @8
@wydblog jeje si.
jose ignacio#11 hace 271 días
WWW.INTERSOF18.CREARPHPNUKE.COM
nils#12 hace 221 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 221 días
@nils no tenia ni idea sobre ese mal!, podrías pasarme algún enlace?
nils#14 hace 221 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 220 días
Pues vaya faena, no tenia ni idea que ocurriera eso :S.
Emilio#16 hace 14 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!