oct
25
2009

Posiciones en CSS

posiciones css

CSS Positions – Posiciones en CSS

Bueno hace un tiempo se hablo sobre el [Entendimiento de modelado en divs, etc] donde se conocio el “tamaño” total de nuestros elementos y su espacio en el universo… pues bueno… ahora… que sabemos eso… nos falta “posicionarlos” es decir, signarles una posicion y que de igual manera se queden alli sin colapsar… entonces al lio…

Para empezar tenemos la propiedad [Position]:
Esta propiedad nos permite (como dice su nombre) “posicionar” y se aplica a cualquier elemento de nuestro documento.

Valores de la propiedad [Position]:
Tenemos a:
absolute:Todo elemento con este valor, hara que deje de ser parte del flujo natural del resto de nuestros elementos.
Esta posicion depende de un elemento padre con position:relative sus coordenadas seran guiadas por top y left, tomando como referencia dicho elemento padre con position:relative.

fixed:Es parecido al valor anterior “absolute”, solo que como bien indica su nombre “fixed” este valor hace que no se mueva dicho elemento, si nimportar el “scroll” vertical de la pantalla, siempre estara fijo donde indiquemos.
Para entender un poco mas de su funcionamiento recordemos “background-attachment:fixed” que nos deja un fondo fijo con css.
PD: No funciona en IE6

inherit:Como cualquier valor de otra propiedad “inherit” cumple su funcion de “heredar” un valor previamente asignado a un contenedor padre.

relative:Esta posicion no solo nos permite direccionarla con top, right, etc… igual, no deja de fluir con todo el documento… con naturalidad.

static: Esta posicion static es el valor que viene por defecto a todo elemento HTML, entonces seguiran fluyendo uno despues de otro, y por esto no es necesario aplicar esta posicion.

PD: el titulo sono medio porno tipo, Kamasutra del CSS. XD

Related Posts

About the Author: Miguel Angel Ortega Acosta

1 Comment + Add Comment

  • De gran ayuda este post :)

Leave a comment

Patrocinador

Siguenos

Suscribete

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.

Correo @zoneartcss.com

Obtén una cuenta de @zoneartcss.com gratuita