Posicionamiento de las capas en CSS

En este articulo os voy a mostrar como podemos posicionar las capas en CSS y lo voy a explicar todo con ejemplos y paso a paso de la mejor forma posible, ya que es un tema importante y que hay que tener muy claro para poder trabajar bien. Antes de empezar con las propiedades propiamente dichas de posicionamiento os voy a mostrar unas etiquetas CSS que nos servirán para ello y que hay que conocer. Os pongo la lista con una pequeña explicación en cada una:

top : esta propiedad desplaza una capa tomando como referencia el borde superior de dicha capa. Se usa para desplazar la capa hacia arriba y abajo. Puede tener valores en “px” y en “%” y también pueden ser valores positivos y negativos. Si a una capa le ponemos como propiedad “top: 100px” la bajara 100 pixels respecto al lugar que debería ocupar. Si le ponemos como propiedad “top:-100px” entonces la subirá 100 pixels respecto al sitio que debería ocupar. Esta propiedad solo sirve para los posicionamientos de tipo “relative”, “absolute” o “fixed” que explicare mas abajo.
bottom : esta propiedad hace lo mismo que “top” pero en vez de tomar como referencia la parte superior lo hace con la parte inferior.
left: hace lo mismo que “top” y “bottom” pero el punto de referencia es la parte izquierda de la capa.
right : hace lo mismo que “left” pero con respecto a la parte derecha de una capa.

Ahora vamos con la etiqueta “position”. Con ella vamos a definir el tipo de posicionamiento que tendrá una capa. Tiene varios valores posibles que os voy a explicar pero el valor por defecto es “static”. Con el valor “static” las capas se van poniendo una debajo de otra en orden según las hayamos declarado en la parte HTML de la pagina. Para que lo veáis os pongo un ejemplo:

<html>

<head>
   <style type="text/css">
      #capa1
         {
         width: 50px;
         height: 50px;
         background-color: blue;
         }

      #capa2
         {
         width: 50px;
         height: 50px;
         background-color: red;
         }

      #capa3
         {
         width: 50px;
         height: 50px;
         background-color: green;
         }
   </style>
</head>

<body>
   <div id="capa1"></div>
   <div id="capa2"></div>
   <div id="capa3"></div>
</body>

</html>

En este ejemplo que os he puesto he creado una pagina en la cual hay que tres capas llamadas “capa1″, “capa2″ y “capa3″. En la sección “head” de la pagina he declarado que las tres capas tienen el mismo tamaño, 50×50 pixels y que cada una tiene un color diferente para poder identificarlas bien y ver su comportamiento cuando las movamos. Si ejecutáis esta pagina veréis lo siguiente en el navegador:

Como podéis ver cada capa esta debajo de la anterior, esto es debido a que como no hemos definido posicionamiento se aplica “static” por defecto para todas las capas. Ahora vamos a añadir la propiedad “position” con el valor “absolute”, con posicionamiento absoluto la referencia es la parte superior izquierda del navegador, pero si definimos posicionamiento absoluto a una capa que esta dentro de otra capa entonces la referencia pasara a se la esquina superior izquierda de la capa en la que este metida. Puede parecer un poco difícil, pero no lo es, luego os pondré un ejemplo. Ahora solo vamos a poner posicionamiento absoluto a las tres capas:

<style type="text/css">
   #capa1
      {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      }

   #capa2
      {
      position: absolute;
      width: 50px; 
      height: 50px; 
      background-color: red; 
      } 

   #capa3 
      {
      position: absolute;
      width: 50px; 
      height: 50px; 
      background-color: green; 
      } 
</style>

Solo tenemos que añadir el atributo “position” con el valor “absolute” a cada capa, fijaros bien en el CSS que os acabo de poner y el primero que puse al principio del articulo y veréis la diferencia. Al añadir “position:absolute” a cada capa en el CSS cuando ejecutemos la pagina en el navegador veremos lo siguiente:

Ahora solo se ve una capa, concretamente la ultima que hemos puesto en el HTML de la pagina, pero ¿donde están las otras dos? Muy sencillo, están debajo de la capa verde. Hemos definido el posicionamiento absoluto de las capas y como no hemos dado coordenadas diferentes a cada capa, el navegador las ha puesto las tres en el mismo sitio sobreescribiendolas y mostrando solo la ultima. Esto lo podemos ver mas claro cambiando lo tamaños de las capas y haciendo la “capa1″ la mas grande, la “capa2″ de tamaño intermedio y la “capa3″ la mas pequeña. Esto lo podemos hacer cambiado el CSS de la siguiente forma:

<style type="text/css">
   #capa1
      {
      position: absolute;
      width: 150px;
      height: 150px;
      background-color: blue;
      }

   #capa2
      {
      position: absolute;
      width: 100px; 
      height: 100px; 
      background-color: red; 
      } 

   #capa3 
      {
      position: absolute;
      width: 50px; 
      height: 50px; 
      background-color: green; 
      } 
</style>

Si ejecutamos esto ahora en el navegador veremos lo siguiente:

Si os fijáis en el ultimo CSS que he puesto he cambiado el tamaño de las tres capas para que podáis ver el resultado. Primero el navegador pone la “capa1″ de color azul, luego pone la “capa2″ de color rojo y finalmente pone la “capa3″ de color verde. Ahora os voy a poner el CSS con el tamaño original de las capas, 50×50 pixels, y vamos a mover las capas por la ventana del navegador con los atributos “top”, “bottom”, “left” y “right” que os indique al principio del articulo. Os pongo el CSS modificado:

<style type="text/css">
   #capa1
      {
      position: absolute;
      top: 100px;
      left: 70px;
      width: 50px;
      height: 50px;
      background-color: blue;
      }

   #capa2
      {
      top: 150px;
      left: 20px;
      position: absolute;
      width: 50px; 
      height: 50px; 
      background-color: red; 
      } 

   #capa3 
      {
      position: absolute;
      width: 50px; 
      height: 50px; 
      background-color: green; 
      } 
</style>

Si ejecutáis esto veréis lo siguiente en el navegador:

Como podéis ver en el CSS a la capa de color verde no le he puesto coordenadas, por lo cual se muestra en la parte superior izquierda. A la capa de color azul le he puesto que la sitúe a 100 pixels de la parte superior y a 70 pixels de la parte izquierda. A la capa de color rojo le he puesto que la muestre a 150 pixels de la parte superior del navegador y a 20 pixels de la parte izquierda. Creo que es bastante sencillo, ¿no?, a partir de aquí podéis jugar con los distintos valores para posicionar las capas.

Supongamos que queremos meter estas tres capas dentro de una capa que las contenga y que al mover la capa contenedoras mantengan su posición dentro de ella, esto lo haríamos de la siguiente forma:

<html>

<head>
   <style type="text/css">
      #capa1
         {
         position: absolute;
         top: 100px;
         left: 70px;
         width: 50px;
         height: 50px;
         background-color: blue;
         }

      #capa2
         {
         position: absolute;
         top: 150px;
         left: 20px;
         width: 50px;
         height: 50px;
         background-color: red;
         }

      #capa3
         {
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: green;
         }

      #contenedor
         {
         top: 100px;
         position: absolute;
         width: 300px;
         height: 500px;
         background-color: black;
         }
   </style>
</head>

<body>
   <div id="contenedor">
      <div id="capa1"></div>
      <div id="capa2"></div>
      <div id="capa3"></div>
   </div>
</body>

</html>

Si ejecutamos esta pagina veremos lo siguiente en el navegador:

Como podéis ver la capa “contenedor” lleva dentro las otras capas. Si os fijáis veréis como las tres capas ahora toman como referencia para posicionarse la esquina superior izquierda de la capa “contenedor” y siempre que movamos la capa “contenedor” las tres pequeñas se moverán con ella ya que están dentro, fijaros también en la parte HTML de la pagina que os he puesto. Ahora podéis probar a mover la capa “contenedor” por la ventana del navegador cambiando los valores “top”, “left”, “right” o “bottom” y ver como dentro de dicha capa las tres pequeñas siempre conservan la misma posición.

Ahora vamos al siguiente tipo de posicionamiento, el relativo. En el posicionamiento relativo las capas se colocaran según las coordenadas que le demos tomando como referencia el sitio en el que deberían estar si el posicionamiento fuese “static”. Resulta mas complejo que el posicionamiento absoluto ya que el origen de las coordenadas no es fijo. En el posicionamiento absoluto la coordenada “top: 0px; left:0px” seria el punto a tomar de referencia y este punto seria la esquina superior izquierda del objeto que contenga la capa, en el posicionamiento relativo la coordenada “top:0px;left:0px” seria el punto en el cual debería estar. Lo mejor es que lo explique con un ejemplo. Primero voy a poner una pagina en la cual hay tres capas, como en el ejercicio anterior, pero les voy a poner el posicionamiento relativo y los valores “top:0px” y “left:0px” a todas las capas:

<html>

<head>
   <style type="text/css">
      #capa1
         {
         position: relative;
         top: 0px;
         left: 0px;
         width: 50px;
         height: 50px;
         background-color: blue;
         }

      #capa2
         {
         position: relative;
         top: 0px;
         left: 0px;
         width: 50px;
         height: 50px;
         background-color: red;
         }

      #capa3
         {
         position: relative;
         top: 0px;
         left: 0px;
         width: 50px;
         height: 50px;
         background-color: green;
         }
   </style>
</head>

<body >
   <div id="capa1"></div>
   <div id="capa2"></div>
   <div id="capa3"></div>
</body>

</html>

Si ejecutamos esta pagina en el navegador veremos lo siguiente:

Es como si no hubiésemos puesto ni el posicionamiento relativo ni las coordenadas. Es como si tuviese posicionamiento estático, el tipo de posicionamiento que tienen todas las capas por defecto si no indicamos lo contrario, por lo tanto pone cada capa una debajo de la otra. Cuando el navegador web ejecuta esta pagina la coordenada “0:0″ es la esquina superior izquierda del cuadrado azul aunque esta capa todavía no este, entonces va ejecutando el HTML y se encuentra la capa azul, va al CSS y toma los atributos de la capa azul y la muestra. A partir de ese momento si la siguiente capa tiene posicionamiento relativo la coordenada “0:0″ para a ser un pixel por debajo de la esquina inferior izquierda del cuadro azul, es decir si en el CSS a la “capa2″ le cambiamos el valor 0 a “top” y ponemos “top:100px” la capa roja se moverá 100 pixels hacia abajo y se pondrá justo debajo del cuadrado verde. Ahora la coordenada “0:0″ es la esquina superior izquierda del recuadro verde. Si tenemos dudas solo hay que ir, como he hecho en este ejemplo, y poner al elemento que tiene posición relativa las etiquetas “top” y “left” a 0 y veremos cual seria la posición en la que debería estar para saber los valores que tenemos que ponerla para cambiarlo de sitio.

Es un poco lioso, o lo parece, pero con el ejemplo que os he puesto y cambiando los valores de las capas y moviendolas lo podréis entender bien. De todas formas dejare un vídeo al final del articulo para mostrar todo con este ejemplo paso a paso y veréis que es mas fácil de lo que parece.

Otro valor que le podemos indicar a “position” es “fixed”, si le indicamos este valor entonces la capa que lo tenga no se moverá de su posición en la pantalla aunque la pagina web sea larga y movamos el scroll, es decir, vayamos hacia abajo en la pagina. Esto es útil para poner la cabecera de una pagina web o blog y que queremos que se vea siempre en la parte superior, por poner un ejemplo. También se usa para poner una imagen de fondo a la pagina web y que este fija.

Otra forma que tenemos de posicionar elementos o capas en una web es mediante el posicionamiento “float” o flotante. En este caso no podemos mover las capas con “top”, “left”, “bottom” o “right”, hay otra forma de hacer que detallare en el siguiente articulo. El tema es que con este tipo de posicionamiento podemos poner las capas de tal forma que este una al lado de la anterior de izquierda a derecha o al revés. Os pongo el CSS con el posicionamiento “float” para que veáis el resultado:

<style type="text/css">
   #capa1
      {
      float: left;
      width: 50px;
      height: 50px;
      background-color: blue;
      }

   #capa2
      {
      float: left;
      width: 50px;
      height: 50px;
      background-color: red;
      }

   #capa3
      {
      float: left;
      width: 50px;
      height: 50px;
      background-color: green;
      }
</style>

Si ponéis el CSS del ejercicio que estamos usando de ejemplo en todo el articulo como este que os acabo de dejar y ejecutáis la pagina veréis como sale lo siguiente:

Como podéis ver, primero se ve la capa azul, luego pegada a su derecha la roja y finalmente pegada a la derecha de la roja la verde. En el caso de que pongamos mas capas y en algún momento alguna no se vea completa en la ventana del navegador entonces se pondría en la siguiente linea. Por esta razón hay que tener cuidado con el posicionamiento flotante, ya que se nos puede descuadrar toda la pagina.

En el CSS he puesto “float: left;” pero tambien admite “float:right;” segun el sentido que queramos ponerle.

Hasta aquí la explicación básica del tema de posicionamiento de capas en CSS, aunque podría ser mas completo con esto esta bastante bien para empezar, y seria muy importante asimilarlo bien. Aquí os dejo un vídeo con los ejemplos paso a paso por si preferís verlo que leerlo:

¿Que os ha parecido el articulo? ¿Lo habéis entendido? Si tenéis alguna duda al respecto estaré encantado de ayudaros :D, un saludo

PDF

Acerca del autor

Liher

Me gusta todo lo relacionado con la informatica, especialemente Linux y el diseño web y me gusta compartir mis conocimientos, de esa forma aprendo cosas nuevas todos los dias

Articulos relacionados

Primeros atributos en CSS, ancho, largo y color de fondo de las capas
Que es el CSS
Como poner CSS en una web de varias formas

4 Comentarios

7 abril, 2014 yomismo
GRGRrrrrrgrgrgrrfh!!! Malditias absolutas y relativas!Cuantas horas abre perdido con ellas

Muy completa y util la explicación
Responder