Tema 10 Métodos de Posicionamiento
Para tener una buena página web, hay que saber cómo posicionar nuestro contenido. Utilizando HTML puro, no podemos posicionar elementos de la página, ya que todo el contenido se acomoda de arriba a abajo. En cambio, si integramos CSS, se nos abren muchas posibilidades. Sin embargo, con diseños más elaborados se puede complicar el posicionamiento y el manejo de escalas de nuestros elementos. Para cualquier elemento podemos modificar su propiedad position, la cual permite seleccionar un método de posicionamiento para el elemento. También podemos utilizar otras propiedades como top, bottom, left y right, que cambian la distancia en las diferentes direcciones a otros elementos del mismo nivel jerárquico.
Tipos de Métodos
Los métodos que podemos aplicar a la propiedad position son los siguientes:
-
static
Este es el método de posicionamiento predeterminado (de arriba a abajo). -
relative
El elemento permanece donde está, pero ahora puede ser afectado con las propiedades top, bottom, left y right. -
absolute
Muestra al elemento en una posición absoluta dentro de su elemento padre/contenedor. A diferencia de relative, los elementos alrededor de un elemento absoluto no se reposicionan alrededor de su posición inicial. -
fixed
Permite que el elemento se mantenga visible en la ventana en todo momento (incluso después desplazar la página). -
sticky
Se comporta como relative hasta que comienza a "salirse" de la ventana. Ahí es cuando se comporta como fixed, manteniendo su posición en la parte superior de la ventana hasta que su elemento padre deje de estar visible.
Ejemplos
See the Pen PoGmOvw by Luis Yerik Arambula (@luis-yerik-arambula) on CodePen.
CodePen. Software utilizado para el desarrollo de ejercicio dinámico de programación. In CodePen. https://codepen.io
Observa y analiza el ejemplo de arriba. ¿Cómo se comportan los elementos con diferentes posicionamientos?
El primer cuadro azul "encierra" por debajo al segundo, que es su elemento hijo. ¿Por qué no pasa esto con los cuadros verdes que están abajo?
Con este ejemplo podemos observar muchas cosas interesantes:
-
Si queremos que un elemento se mantenga visible en todo momento, podemos usar fixed o sticky (cuadros rojo y naranja).
-
Si queremos modificar el posicionamiento original de un elemento, utilizamos relative (cuadros azules).
-
Si queremos que un elemento se pueda posicionar libremente y sin afectar a los elementos alrededor, utilizamos absolute (cuadros verdes).
Copia el código y juega con los métodos de posicionamiento. Es muy
importante que entiendas cómo funcionan estas propiedades para que
puedas acomodar elementos de manera creativa. Puedes ver más ejemplos 
aquí.