comments 2

Curso de programación web desde cero: Clase 6

Position. Finalizando el modelo de caja.

Lo lees en: (13:14)

El modelo de caja, tal y como hemos ido viendo a lo largo de este Curso de Programación Web desde Cero, es una de las claves para poder maquetar web de formar eficiente.
Haciendo un poco de resumen de lo que ya hemos visto: para crear márgenes externos e internos para nuestros elementos web usamos margin y padding. Hemos visto como dimensionar nuestros elementos con width y height, para así poder darles ancho y alto. También hemos visto gracias a display como se disponen los elementos en nuestra web, y como se relacionan entre sí, sobretodo en línea.
Hoy, con position, terminamos de ver el modelo de caja.

¿Comenzamos?

La propiedad Position.

Mediante la propiedad position podemos establecer la posición de un elemento dentro de nuestro maquetación. Con él indicamos que posición va a tener con respecto a un eje cartesiano.

Las cajas, nuestros elementos HTML tienen posiciones. No estamos hablando del comportamiento de esa caja como display, ni de dimensiones, ni de márgenes o paddings, sino de posición de la caja.

Hay cuatro tipos de position: static, relative, absolute, fixed.

Por defecto todos los elementos tienen position: static; y en función del tipo de position que tenga, nuestro elemento se comportará de una manera diferente.

Static: es el valor por defecto, una caja colocada en función de su display, con sus márgenes. Nada raro.

Relative: cuando una caja tiene position relative, automáticamente gana la posibilidad de cinco propiedades más: top, bottom, right, left y z-index.

Con top, bottom, right y left, podemos situar nuestro elemento en cualquier posición en base a un eje cartesiano bi-dimensional.

Con z-index, le damos altura a nuestro elemento con respecto a otros, como si fueran diferentes capas. Esto sirve para decidir qué elemento será visible cuando coincidan varios elementos en nuestra maquetación, uno sobre otro.

Con estos elementos no estamos aplicando márgenes, estamos aplicando distancias con respecto a un punto (0,0), que por defecto siempre se sitúa arriba y a la izquierda del body.
Es muy importante saber que cada elemento de caja, tiene su propio eje cartesiano.

Por cierto, si un elemento tiene position static, no tiene estos atributos, por mucho que los incluyamos en nuestro CSS, nuestra caja no se posicionará.

Una vez que usamos los atributos de top, bottom, right, left, o z-index, movemos nuestros elementos sin que importen los márgenes que usemos, ni los display inline o block. Directamente se los salta.

Pero ese movimiento, si está dentro de un contenedor y hay más elementos en si interior, se ven alterados. Si a un elemento dentro de un container, le ajusto un valor top esa caja se aleja de la parte superior y empuja las cajas que tenga debajo, si están dentro del mismo contenedor.

Un elemento con position relative, sigue respetando la jerarquía del html.
Por eso si movemos una caja con position relative, todos los elementos que hay en el interior de la caja se mueven con ella.

Absolute: cuando a una caja le asignamos el valor de position absolute, la caja rompe el vínculo con el eje cartesiano donde se encuentra, y se va al punto (0,0) de la caja jerárquica más próxima que tenga position: relative, o si no hay ninguno, al body. Repito porque es importante: “Si no encuentra ninguna caja con position relative en la jerarquía superior del html, se va al 0,0 del body”.

Un elemento con position absolute, no cumple el flujo ni la jerarquía del html, la podemos posicionar en base a un eje cartesiano de la caja de nivel jerárquico superior que tenga position relative o, si no hay ninguna, con el eje cartesiano del body.

Position absolute se utiliza mucho cuando tenemos que maquetar un elemento que parece no cuadrar en ninguna malla. Con position absolute, podemos incluso saltarnos la propiedad display y que no afecte a nuestro elemento.

Fixed: si fijamos una caja, la misma se sale de todos los ejes de coordenadas del documento y no le afecta el scroll. Se ajusta siempre en la misma posición. Esto lo verás mucho por ejemplo, cuando haces scroll en una web, y la barra de navegación se mantiene siempre visible, en la misma posición, como si estuviera siguiéndote. Esto se debe a que ese nav, tiene position: fixed;

Esquema resumen de position.

Esquema resumen de position.

Vamos a ver un ejemplo rápido con algo de código para terminar de tenerlo claro. Sé que puede parecer algo complejo, pero es muy sencillo.

Ejemplo 1: las dos cajas.

Vamos a crear dos cajas, una de borde naranja, y otra en su interior de color azul claro. El body, el contenedor general de nuestro html, le pondremos un borde de color gris.

Si has seguido el curso, sabes crear esto, y debe quedarte algo asi:

Nuestro html.

Nuestro html.

CSS:

body{
   border: 2px solid gray;
}
 
.caja-naranja{
  height: 100px;
  border: 1px solid orange;
}
 
.caja-azul{
  height: 60px;
  background: lightblue;
}
Visualizando nuestro código en el navegador.

Visualizando nuestro código en el navegador.

Como puedes ver, los bordes de nuestro body y de la caja-naranja se confunden. Por ello, y para visualizar mejor lo que ocurre, podemos aplicarle un margen en todas direcciones a nuestra caja-naranja, que además es contenedora de la caja-azul.

CSS:

.caja-naranja{
  height: 100px;
  border: 1px solid orange;
  margin: 10px;
}
Ahora body y caja-naranja no se confunden.

Ahora body y caja-naranja no se confunden.

Como ambos elementos, la caja-naranja, y la caja-azul, tienen por defecto display block ocupan la totalidad de la ventana del navegador. Para preparar mejor nuestro ejemplo, a ambos div les vamos a fijar un ancho, y vamos a ponerle un margin a la caja-azul, para separarla un poco de la caja-naranja que le contiene.

CSS:

body{
  border: 2px solid gray;
}
 
.caja-naranja{
  height: 100px;
  width: 350px;
  border: 1px solid orange;
  margin: 10px;
}
 
.caja-azul{
  height: 60px;
  width: 200px;
  margin-top: 10px;
  background: lightblue;
}
Dimensionamos con width nuestras cajas.

Dimensionamos con width nuestras cajas.

Hasta aquí nada raro. Ya está nuestro ejemplo preparado para empezar a jugar un poco con las posiciones.

Position Relative:

Por defecto, todos estos elementos tienen position static. Eso quiere decir que los atributos top, left, right y bottom no existen para ellos. Por mucho que le asignemos valores, no se van a aplicar.

Ahora bien, si le aplicamos position: relative, a nuestra caja-naranja, ésta puede tener tanto top, como bottom, right o left.
En este ejemplo vamos a intentar bajar la caja naranja 50 px, y hacia la derecha 20 px. Para ello basta con ponerle a la clase caja-naranja:

CSS:

.caja-naranja{
  height: 100px;
  width: 350px;
  border: 1px solid orange;
  margin: 10px;
  position: relative;
  top: 50px;
  left: 20px;
}
Nuestra caja-naranja con position relative y posicionada.

Nuestra caja-naranja con position relative y posicionada.

Como puedes ver, hemos posicionado la caja-naranja en base al eje cartesiano del documento: la hemos bajado 50 px, y desplazado hacia la derecha 20px. Pero además han pasado dos cosas más:
la caja azul, también se ha movido con ella, por estar en el interior de la caja-naranja.
el contenedor body no ha cambiado su tamaño, es decir, no se ha deformado con el movimiento de la caja que hay en su interior, cosa que sí habría ocurrido su hubiéramos usado margin en lugar de position.

Esto es lo que ocurre cuando usamos position: relative.

Position Absolute:

Ahora bien, si a nuestra caja-azul, le aplicamos position: absolute, y le aplicamos un bottom: 0px para llevarla hacia abajo del todo.

CSS:

.caja-azul{
  height: 60px;
  width: 200px;
  margin-top: 10px;
  background: lightblue;
  position: absolute;
  bottom: 0px;
}
Nuestra caja-azul se va hacia la parte de abajo de la caja-naranja que lo contiene y tiene position relative.

Nuestra caja-azul se va hacia la parte de abajo de la caja-naranja que lo contiene y tiene position relative.

Como puedes ver se va a 0 px de distancia de la parte de abajo del div de la caja-naranja. Pero porque en la jerarquía html de nuestro documento, la caja superior, en este caso la caja-naranja, tiene position relative.

Mira lo que ocurre si le cambiamos la position de relative a static. Nuestra caja azul se posiciona a 0px de la parte de abajo de nuestro navegador, es decir, de nuestro documento.

Nuestra caja-azul a bottom 0 de nuestro documento.

Nuestra caja-azul a bottom 0 de nuestro documento.

Position Fixed:

Ahora, vamos a aplicarle a nuestra caja-azul una position:fixed; y para poder apreciar mejor lo que ocurre, vamos a posicionarla a 0 px de la parte superior.
Para que el efecto sea visible, vamos a darle a body una altura suficiente, por ejemplo 1000 px.

CSS:

body{
  border: 2px solid gray;
  height: 1000px;
}
 
.caja-naranja{
  height: 100px;
  width: 350px;
  border: 1px solid orange;
  margin: 10px;
  top: 50px;
  left: 20px;
}
 
.caja-azul{
  height: 60px;
  width: 200px;
  margin-top: 10px;
  background: lightblue;
  position: fixed;
  top: 0px;
}

Ahora si te fijas, cuando hacemos scroll, la caja azul, se queda como flotando, acompañando la distancia del scroll.

Nuestra caja-azul fixed, fijada al hacer scroll.

Nuestra caja-azul fixed, fijada al hacer scroll.

Ejemplo 2: dos elementos en línea, uno a la derecha y otro a la izquierda con position

Vamos a hacer un ejemplo muy rápido y que resulta muy frecuente en web: dos elementos en línea, uno a la derecha, otro a la izquierda, y con posición elástica.

La home de Spotify, tiene elementos en extremos en su header: logo y login.

La home de Spotify, tiene elementos en extremos en su header: logo y login.

Aquí puedes ver un ejemplo, en la web de Spotify. Como puedes ver en su header tiene el logo alineado a la izquierda, y el menú con el botón de login alineado a la derecha.
Esta disposición de elementos se realiza con position.

En este caso y por simplificar para poder centrarnos en lo que realmente importa, que es aprender a usar position, vamos a crear un nuevo index.html en cuyo body vamos a colocar un header con dos div. Creamos dos clases, “texto-1” y “texto-2” para poder estilizar cada elemento de forma independiente. Este código debe quedar más o menos así:

El index.html de nuestro ejemplo 2.

El index.html de nuestro ejemplo 2.

Vamos a comenzar dimensionando el header. Como tiene por defecto display block, tal y como vimos en la clase anterior, siempre va a ocupar la totalidad del ancho del navegador. Y eso es exactamente lo que queremos, que nuestro header ocupe la totalidad del ancho. Eso si, tenemos que darle altura. Por ejemplo 35px de altura con la propiedad height.
También le vamos a añadir un fondo de color gris para visualizar su estructura de caja con background.

Vamos a situar nuestro header a 60 px de la parte superior para ver realmente que ocurre en nuestro ejemplo. Esto podemos hacerlo, como ya sabes, con margin-top.
Para que los elementos de texto estén alineados en nuestro header, basta con indicarle una altura de texto que sea igual a la altura del header, que en este caso es de 35px. Para ello usaremos la propiedad line-height.
Ya veremos más adelante como hacer todo esto y dimensionar elementos de forma más dinámica, en lugar de tener que recurrir a dimensiones estáticas y fijas.

CSS:

header{
  background: gray;
  margin-top: 60px;
  height: 35px;
  line-height: 35px;
}
Texto 2 está debajo. Como no puede ser de otra manera.

Texto 2 está debajo. Como no puede ser de otra manera.

Como puedes ver, “Texto 2” sale debajo incluso de header. Esto ocurre porque porque nuestro div con clase “texto-1” tiene display block y evita que el div de clase “texto-2” esté a su lado. Vamos a ponerle remedio muy pronto.

Como ya vimos anteriormente nuestros elementos por defecto tienen la propiedad position como static.
Esto quiere decir que si cambiamos la propiedad position al div de clase “texto-2” de static a absolute, nos saltamos el display block del div de clase “texto-1.
Además, al tener position absolute, podremos usar las propiedades de top, right, left, bottom y z-index, para situar nuestro div donde queremos, que es en el extremo derecho de nuestro header. Para ello basta con usar top y right.

CSS:

.texto-2{
  position: absolute;
  top: 0;
  right: 0;
}
Texto 2, arriba, a la derecha...

Texto 2, arriba, a la derecha…

Como puedes ver, nuestro elemento ahora está situado arriba a la derecha….pero del todo, tal y como ya sabemos que va a ocurrir ya que, y permíteme citarme a mí mismo:

“cuando una caja tiene position absolute, rompe el vínculo con el eje cartesiano donde se encuentra, y se va al punto 0,0 de la caja jerárquica más próxima que tenga position: relative, o si no hay ninguno, al body”

Recuerda que los elementos html que tienen position absolute, no respetan la jerarquía html.
Como no hay ningún elemento en su jerarquía html superior que sea relative, ahora tiene su eje cartesiano en el body.
¿Cómo lo arreglamos ahora? ¿Usando margin? No.

Es tan sencillo como asignarle a nuestro header, que será el contenedor de ese div, un position relative, para que el div tenga como referencia su eje cartesiano y no el del body. Por tanto en header, tenemos que añadirle position: relative;:

CSS:

header{
  background: gray;
  margin-top: 60px;
  height: 35px;
  line-height: 35px;
  position: relative;
}
Ya tenemos nuestro header con un elemento a la derecha y otro a la izquierda. Y sin float.

Ya tenemos nuestro header con un elemento a la derecha y otro a la izquierda. Y sin float.

Ahora como puedes ver, tenemos un elemento a la derecha y otro a la izquierda, dentro de un header, utilizando exclusivamente position. Sin floats.

Conclusión

Con position ya hemos terminado de ver el modelo de caja, y ya podemos subir un nivel en nuestro camino para poder desarrollar y maquetar cualquier tipo de proyecto web.
Espero que te haya gustado esta clase y que hayas comprendido los conceptos que hemos visto porque junto con display, margin y padding, son la clave en el diseño web. Si no has entendido algo o tienes cualquier pregunta, ya sabes que puedes utilizar los comentarios que tienes debajo.

En próximas clases empezaremos a maquetar elementos más complejos y sobretodo más extensos, para lo cual usaremos display table y display flex.
Pero antes, tomaremos un poco de aire aprendiendo a incorporar fuentes a nuestros proyectos y hablaremos de imágenes y cómo utilizarlas de fondo.

Pero ya será en la siguiente clase :)

Post Relacionados:
Clase 0, Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 3, Maquetación web básica.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

2 Comentarios

  1. Javier Miguel

    Muy bueno Fran! como sugerencia puedes contar como centrar elementos horizontalmente y verticalmente, que es en lo que muchos sufrimos cuando empezamos

    Abrazo!
    Javier

  2. FranciscoJGallardo

    Hola Javier!
    Claro, podemos tratarlo y ver varios ejemplos en las futuras clases. Me lo apunto también para el proyecto de final del curso.
    Muchas gracias por el aporte y el comentario!
    Un abrazo.

Leave a Reply