Posicionamiento con CSS: Absoluto, Relativo, Flotante, Estático, Fijo

En un anterior post hablamos de las básico o principal para formar una maquetación en css (Introducción a la maquetacion paginas web con css).  En este post les hablare de las diferentes propiedades que existen de posicones de cajas en css para páginas web (Posicionamiento con CSS).

Posicionamiento con CSS: Absoluto, Relativo, Flotante, Estático, Fijo

Esta es una parte complementaria del modelo de caja,  el navegador te da por defectos la ubicación de esta; cuando tienes más de una caja en la página, el navegador las pondrá una abajo de otra, esto depende de qué tipo de caja sea, en línea o bloque.

Forma por ser modelo bloque:

Esta es la estructura que utilizare para dar los ejemplos con las posiciones de caja.

El diseño de css le pondremos este.

Podemos forzar a la caja a cambiar de posiciones desplazándose hacia los lados arriba o abajo; existen actualmente 5 formas de posiciones de caja en css para páginas web  que son:

• Estático
• Relativo
• Flotante
• Absoluto
• Fijo

Estático: Es posicionamiento que el navegador te da por defecto a menos que uno le de otro.

Relativo: esta es bastante usado y lo que nos permite es posicionar una caja y desplazarla de su posición original dejando un espacio vació.

Ejemplo  

Le colocare un class a una de las cajas en mi caso será la #2 para  que solo se mueva esta.

Recuerden que para poner un class es de esta forma:

<div class="caja">
 <h2> #2</h2>
 </div>

En la parte del css colocaremos:

Cuando se va utilizar el comando Position ya sea con relativo, absoluto o fijo, lleva estas 4 opciones (top, bottom, right, left); estos son para darle las coordenadas de cuanto queremos que se mueva la caja.

Ejemplo:

Desplazaremos la caja #2, 200px hacia abajo y 200px hacia la derecha

Si se dan cuenta deja el espacio, estos elementos que están abajo no se corren.

Se puede utilizar  valores negativos si los necesita, también puedes utilizar los otros pero sería si ya le dijimos que bajara 200px no necesitas decirle 100px hacia arriba para eso; solo le ponemos 100px hacia abajo y ya.

Fijo: la caja que tenga esta propiedad podrá desplazarse como la anterior propiedad (relativo) pero esta  quedara fija, esto quiere decir que bajes o subas en la página, la caja se moverá; no importa que tanto deslices hacia abajo  o arriba ella se moverá.

Codigo:

.caja{
      position:fixed;
      top:200px;
      bottom:;
      rigth:;
      left:200px;
}

Absoluto: En este la caja #3 que estaba abajo se corrió al lugar de #2

Si se dan cuenta el #2 se puso hasta arriba, desde aquí puedes desplazarlo. Pero este es más complicado ya que tienes que dividir todo el monitor o el área de donde  se puede desplazar y calcular más o menos las coordenadas para que la caja esta donde uno quiere y no se vaya hasta el extremo; entonces si nosotros le dejas a la caja #2 en 0 todas, se nos colocaría en la esquina donde está el #1 de esta forma:

Flotante:

Este no necesita de un position se agrega de esta forma; en el mismo Div con el código Float y allí le agregaremos si quieres derecha (left), Izquierda (rigth), este solo se desplaza de esa forma las cajas que uno quiera.

En la página se vería de esta forma:

Los bloques se alinean hacia la derecha; sin embargo si le decimos que sea para la izquierda pasa esto

Se alinean de forma al revés y desde el otro extremo de la pantalla o página; el float no solo funciona para columnas también funciona con texto. Pero esto lo trataremos en otro post.