Posicionamiento

Las propiedades de posicionamiento permiten definir la ubicación de un elemento, romper el flujo normal de las cajas de HTML y colocar un elemento debajo de otro.

Al manipular todas estas propiedades en conjunto podemos crear capas y jugar con el eje Z.

Las propiedades son las siguientes:

Position

Todos los elementos de HTML tienen por defecto el valor position:static; y por lo tanto su ubicación es de acuerdo al flujo normal de la página web. Al tener este valor, las propiedades de top, bottom, right y left son ignoradas.

Propiedad	Valores	Explicación
position	static	Es el valor por defecto y hace que el elemento haga parte del flujo normal de una página. Es decir todos en la capa 0 (z-index:0) y sin ubicarse uno encima del otro.
	fixed	Su posición se vuelve relativa a la ventana del navegador. El elemento no se mueve y se queda fijo, sin importar que se haga scroll en la página. El objeto al que se le aplica deja de hacer parte del flujo normal y puede superponerse a los otros elementos (z-index).
	relative	Su ubicación se vuelve relativa a su posición original, moviéndolo con las propiedades de top, right, bottom y left. Este elemento no deja de ser parte del flujo normal y su espacio original se mantiene.
	absolute	Su posición se vuelve relativa al primer elemento padre que encuentre que tenga la propiedad position que no sea static. Si no hay ningún elemento con el position cambiado, se vuelve relativo a la ventana del navegador. El objeto al que se le aplica deja de hacer parte del flujo normal y puede superponerse a los otros elementos (z-index).

Propiedades para manipular la posición

Propiedad	Explicación
Top	Define la distancia al borde superior del elemento del cual es relativa su posición. Es decir: Si tiene position:relative; es con respecto al borde superior de su posición original Si tiene position:fixed; es con respecto al borde superior de la ventana del navegador Si tiene position:absolute; es con respecto al borde superior del primer elemento padre con position diferente a static Si tiene position:static; ignora los valores de top
right	Define la distancia al borde derecho del elemento del cual es relativa su posición. Es decir: Si tiene position:relative; es con respecto al borde derecho de su posición original Si tiene position:fixed; es con respecto al borde derecho de la ventana del navegador Si tiene position:absolute; es con respecto al borde derecho del primer elemento padre con position diferente a static Si tiene position:static; ignora los valores de right
bottom	Define la distancia al borde inferior del elemento del cual es relativa su posición. Es decir: Si tiene position:relative; es con respecto al borde inferior de su posición original Si tiene position:fixed; es con respecto al borde inferior de la ventana del navegador Si tiene position:absolute; es con respecto al borde inferior del primer elemento padre con position diferente a static Si tiene position:static; ignora los valores de bottom
left	Define la distancia al borde izquierdo del elemento del cual es relativa su posición. Es decir: Si tiene position:relative; es con respecto al borde izquierdo de su posición original Si tiene position:fixed; es con respecto al borde izquierdo de la ventana del navegador Si tiene position:absolute; es con respecto al borde izquierdo del primer elemento padre con position diferente a static Si tiene position:static; ignora los valores de left
z-index	Define el orden de apilación de los elementos, es decir que crea capas y permite ubicar elementos uno sobre otro. Solo funciona si el position es diferente a static Puede tener valores negativos. Entre más grande sea el valor, más arriba va a estar ese objeto. Su valor es un numero sin unidad especificada. Por ejemplo: z-index:158;