Todo sobre el posicionamiento CSS

todo sobre posicionamiento CSS

Todo sobre el posicionamiento CSS

En este artículo vamos a ver todo lo que necesitas saber sobre el posicionamiento CSS para que puedas presumir de saber colocar perfectamente elementos en CSS.

Empezaremos viendo los cinco diferentes valores de la propiedad Position CSS que existen para posicionar un elemento.

1-Posicionamiento CSS por defecto – «position: fixed»

En HTML, vamos a generar un contenedor con tres elementos  sin especificar ninguna posición.

<div class="contenedor">
Contenedor
   <div class="hijo-uno hijo">Uno</div>
   <div class="hijo-dos hijo">Dos</div>
   <div class="hijo-tres hijo">Tres</div>
</div>
.contenedor{
   padding: 5px;
   background: #588c7e;
}
.hijo{padding: 10px 5px;}
.hijo-uno{background:#f2e394;}
.hijo-dos{background:#f2ae72 ;}
.hijo-tres{background: #d96459;}
bloques-html-sin-posicion

Position Static

Abrimos la página en un navegador y vamos a inspeccionar. En este momento no hay absolutamente ningún estilo de posición aplicado solo estilos de colores de fondo y un poco de padding.

En el inspeccionar podemos averiguar cómo de forma predeterminada nuestra propiedad de posición se establece en estática, es la posición predeterminada en el flujo de un documento HTML.

posicionamiento css por defecto

 

2-Posicionamiento CSS relativo – «position: relative»

La posición relativa funciona casi exactamente como el posicionamiento estático. Si cambiamos la posición de nuestro primer hijo en «relative», no va a pasar absolutamente nada.

¿Que hace la propiedad «position: relative?

Eso es porque la posición relativa actúa exactamente como el posicionamiento estático pero permite mover un elemento en relación a su posición actual  con las propiedades CSS top, bottom, left, right.

.contenedor{
   padding: 5px;
   background: #588c7e;
}
.hijo-uno{
   position: relative;
   left: 20px;
   top: 10px; 
}

Por ejemplo, si aplicamos la propiedad left con 20 píxeles, el elemento se mueve y desborda a su padre en 20 píxeles en el lado derecho. Si ponemos top 10px pasa a desbordar también el siguiente elemento.

La razón por la que los elementos hijos 2 y 3 no se empujan hacia abajo cuando este elemento hijo uno se empuja hacia abajo es porque se eliminó del flujo del documento HTML. Por lo tanto, ya no funciona como un elemento posicionado estáticamente.

posicionamiento css relativo y desbordamiento

position relative

En general, no vas a utilizar las propiedades top, left, right y bottom con un elemento en posición relativa pero si queremos dejar un hueco y mover un elemento que lo ocupaba, puede ser una solución.

 

3-Posicionamiento CSS absoluto – «position: absolute»

Este valor para la propiedad CSS «position» nos permite utilizar esta vez de manera más correcta las propiedades top, left, bottom, right.

Si ponemos ahora un posicionamiento absoluto al primer hijo, podemos ver como esta vez, el elemento hijo-uno esta “ignorado”.

Eso se produce porque la posición absoluta, retira el elemento del flujo del documento HTML. No queda espacio vacío.

Todo lo demás funciona como si ese elemento absoluto no existiera. Eso hace que la posición sea absolutamente útil cuando quieres pegar algo en una posición específica pero no quieres que nada más se mueva a su alrededor.

Y ahora si aplicamos la propiedad top con 0 pixeles, esta vez veremos que el elemento está arriba de nuestra pantalla.

.hijo-uno{
   position: absolute;
   top: 0; 
}

Pasa eso, porque la posición absoluta posiciona un elemento dentro de algún contenedor padre que puede tomar de referencia.

Posicionar en función de un elemento padre

En este caso, no puede tomar referencia de su padre directo porque está en posición estática. Lo que significa que no puede tener nada más posicionado absoluta o relativamente a él.

Para cambiar un elemento de modo que pueda colocar algo de forma absoluta o relativa a él, debe usar uno de los otros valores de posicionamiento «relative», «absolute», «sticky» o «fixed».

.contenedor{
   position: relative;
/*** podrías ser absolute, sticky o fixed***/
}
.hijo-uno{
   position: absolute;
   left: 20px;
   top: 10px; 
}

Ahora, nuestro elemento «hijo-uno» en posición absoluta está ubicado en relación a su elemento padre «contenedor» en posición relativa. Aquí es cuando la posición relativa es muy útil.

A este nivel, es importante saber que:

cada vez que un elemento tenga una posición que no sea estática, los elementos absolutos usarán este como su padre para posicionarse en relación a el.

4-Posicionamiento CSS fijo- «position: fixed»

Es muy similar a la posición relativa pero hay algunas advertencias al respecto.

Si ponemos el primer hijo en posición fija, podemos ver que el elemento ignora totalmente la posición relativa del contenedor padre y se posiciona arriba de la pantalla.

.contenedor{
   position: relative;
}
.hijo-uno{
   position: fixed;
   top:0;
   left: 20px;
}
bloque-en-posicion-fixed

Position Fixed

Eso es porque los elementos en posición «fixed» siempre se posicionan en relación al documento HTML en su integralidad.

También algo realmente único acerca de los elementos de posición fija es que permanecen en el mismo lugar cuando se hace sroll (desplazamiento hacia abajo o arriba en la página).

 

5-Posicionamiento CSS sticky- «position: sticky»

Básicamente es una combinación entre los posicionamiento «relative» y «fixed».

.contenedor{ 
   position: relative; 
   height:200vh;
}
.hijo-uno{
   position: sticky;
   top:0;
}

A primera vista, si ponemos position sticky al primer hijo, da la impresión que se comporta normalmente.

Pero al hacer sroll, en cuanto este elemento toca el top del documento HTML pasa a tener una posición fixed.

Es lo que hace, que este valor sea muy poderoso. Por defecto es relative pero en cuanto hacemos scroll se transforma en fixed posición.

También debe especificar al menos uno de de las propiedades top, right, bottom o left para el posicionamiento sticky en función de si va a ser sticky en un scroll horizontal o vertical.

bloque-posicion-sticky

Position Sticky

6-Algunos Ejemplos de código con posicionamiento CSS

-Dibujo de una Caja Sorpresa con CSS

dibujo caja sorpresa CSS

En este ejemplo, se utilizan las posiciones relativa y absoluta para poder dibujar los lazos de la caja.

Podéis encontrar todo el código haciendo click aquí en la imagen.

 

 

-Menú de navegación estilo cajón CSS

En este caso, se posiciona en absoluto el cajón que va apareciendo y desapareciendo a medido que pasamos encima de los elementos del menú de navegación. Podéis ver el código haciendo click en la imagen.

menu navegacion estilo cajon CSS

-Efecto Glitch con CSS

Para este ejemplo, os aconsejo jugar un poco con el código y quitar la posición absolute a los elementos que la tienen para entender mejor. Porque en ese caso, tenemos una etiqueta <p>que contiene el texto, en posición absoluta. Y luego unos <span> que hacen con la propiedad clip-path un recorte.

Haciendo click en la imagen, encontrareis el código para jugar con el.
efecto glitch con CSS

 

Como se puede apreciar con esos ejemplos, el posicionamiento CSS da para mucho. Os animo a seguir nuestras masterclass online para poder dominarlo cada vez mejor.

Y  más que todo disfrutad todas las posibilidades que nos da el lenguaje CSS:)

 

Escribe un comentario