Posicionamiento de elementos de HTML
Hay una gran cantidad de elementos HTML, imágenes, párrafos, listas, contenedores, entre muchos otros, por lo cual hay una infinidad de formas de utilizar dichos elementos para conseguir diferentes efectos. Una de las propiedades más comunes que pueden manipularse para conseguir efectos o comportamientos poco comunes en las páginas, es el atributo position.
Document Flow
Primeramente, es necesario hablar un poco del flujo del documento o document flow. Aunque el nombre suene elegante, en realidad es un concepto muy sencillo de entender.
El flujo del documento, no es otra cosa más que la forma en que los elementos HTML se acomodan al momento de ser renderizados/dibujados por el navegador. Este orden, está plasmado en el código HTML ya que conforme el navegador va interpretando el código, va acomodando los elementos. Cada elemento ocupa su propio lugar dentro del documento y si uno de ellos llegase a desaparecer, los demás ocuparían su lugar.
Otra forma más sencilla de verlo es pensar en el famoso juego de Tetris. En el juego, los bloques (de diferentes formas) van cayendo poco a poco hasta apilarse en el fondo de la pantalla. Cuando un bloque cabe enmedio de otros dos, ocupa ese lugar vacío. Cuando no encuentra un lugar que llenar, simplemente se apila encima de los demás bloques. Es lo mismo que ocurre en el flujo del documento, la diferencia es que los elementos HTML (bloques de Tetris) "caen" de abajo hacia arriba.
La parte importante de hablar sobre el flujo del documento HTML, es que quede razonablemente claro que cada elemento ocupa un lugar dentro de la estructura y que si movemos algún elemento, en mayor o menor medida afectamos también al documento en conjunto. A menos que manipulemos la propiedad position.
Posicionamiento
Ahora bien, habiendo hablado de Document Flow, podemos hablar de los distintos tipos de posicionamiento CSS, sus principales características, cómo funcionan y cómo afectan al flujo del documento.
position: static; position: relative; position: absolute; position: fixed;
Posicionamiento: Estático
position: static;
El posicionamiento estático es aquel con el que los elementos HTML vienen por defecto, viene de fábrica. Éste establece que cada elemento se irá colocando debajo del anterior, ocupando los espacios que le sean posibles (exactamente igual que los bloques de Tetris que mencionábamos anteriormente).
El posicionamiento estático es muy simple, tanto así que no permite desplazar los elementos de su posicion original en el documento a través de CSS.
Ejemplo:
- 1
- 2
- 3
Posicionamiento: Relativo
position: relative;
Es exactamente igual al posicionamiento estático en el sentido de que los elementos se renderizan tal cual vienen en el código HTML y se acomodan uno debajo del otro.
Estático y relativo difieren en que el segundo sí permite despalzar los elementos HTML de su posición original a través de coordenadas, las cuales, se definen tomando como referencia el lugar original del elemento, por medio de las propiedades top, right, bottom y left, donde como se puede deducir, cada propiedad se refiere a la distancia que tiene el elemento respecto a su posicion original.
Los elementos con posicionamiento relativo pueden ser desplazados de su lugar pero este desplazamiento afecta al flujo del documento, ya que aunque el elemento se desplace, el lugar donde estaba se conserva como "ocupado", es decir, como si el elemento siguiera ahí.
Ejemplo:
// código del recuadro desplazado position: relative; left:-100px; background-color: #088A85; padding:20px; width: 30px; margin: 10px auto;
Como podemos ver, el primer cuadrado está desplazado y a pesar de eso, los demás elementos conservan su posicion en vez de recorrerse hacia arriba.
Posicionamiento: Absoluto
position: absolute;
Es similar, es más, casi igual al posicionamiento relativo. Los elementos con este posicionamiento pueden ser desplazados de su lugar original por medio de las propiedades antes descritas, dichas propiedades se definen respecto al contenedor padre con posicionamiento relativo más próximo.
Ejemplo:
//código de los recuadros background-color: #088A85; padding:20px; width: 30px; position: absolute; left:5px; top:5px;
En estos dos ejemplos, ambos recuadros verdes tienen los mismos valores en sus propiedades left y top (ambos estan a left:5px; top:5px; de distancia de su contenedor de referencia), pero no están en el mismo lugar debido a que en el primer ejemplo el contenedor externo es el que tiene el posicionamiento relativo mientras que en el segundo ejemplo es el contenedor interno
La diferencia fundamental, es que mover estos elementos de lugar no afecta al flujo del documento, es decir, el lugar donde solía estar el elemento no continúa ocupado.
Ejemplo:
//código del recuadro left:80px; position: absolute; background-color: #088A85; padding:20px; width: 30px; margin: 10px auto;
En este caso, el primer recuadro está desplazado y a la vez, el resto de los elementos se acomodan como si el recuadro nunca hubiera estado ahí.
Posicionamiento: Fijo
position: fixed;
Los elementos con posicionamiento fijo se comportan de una forma similar a los elementos relativos y absolutos en el sentido de que los tres son relativos a un elemento padre en funcion del cual se definen sus posiciones. Relativos y absolutos se posicionan en relación al contenedor padre más proximo como se menciona anteriormente mientras que los elementos con position: fixed; son relativos al viewport o puerto de visión del navegador. Es decir, los elementos con posicion fija, como su nombre indica, se mantienen fijos siempre en el mismo lugar independientemente de lo que suceda en el documento HTML o si el navegador scrollea hacia abajo o a los lados. Podemos ver un ejemplo en el siguiente enlace: esto es un enlace. Al hacer scroll hacia abajo, llega un punto en el que el menu se queda pegado en la parte de superior de la ventana del navegador.
Dudas, sugerencias, saludos y zings, dejar un comentario por favor c:
