.contenedor{\r\n padding: 5px;\r\n background: #588c7e;\r\n}\r\n.hijo{padding: 10px 5px;}\r\n.hijo-uno{background:#f2e394;}\r\n.hijo-dos{background:#f2ae72 ;}\r\n.hijo-tres{background: #d96459;}<\/pre>\n![\"bloques-html-sin-posicion\"](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/bloques-html-sin-posicion.jpg\")
<\/a>Position Static<\/p><\/div>\n
Abrimos la p\u00e1gina en un navegador y vamos a inspeccionar. En este momento no hay absolutamente ning\u00fan estilo de posici\u00f3n aplicado solo estilos de colores de fondo y un poco de padding.<\/p>\n
En el inspeccionar podemos averiguar c\u00f3mo de forma predeterminada nuestra propiedad de posici\u00f3n se establece en est\u00e1tica, es la posici\u00f3n predeterminada en el flujo de un documento HTML.<\/p>\n
![\"posicionamiento](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/posicionestatica-en-navegador.jpg\")
<\/a><\/p>\n <\/p>\n
2-Posicionamiento CSS relativo – \u00abposition: relative\u00bb<\/h2>\n
La posici\u00f3n relativa funciona casi exactamente como el posicionamiento est\u00e1tico. Si cambiamos la posici\u00f3n de nuestro primer hijo en \u00abrelative\u00bb, no va a pasar absolutamente nada.<\/p>\n
\u00bfQue hace la propiedad \u00abposition: relative?<\/h3>\n
Eso es porque la posici\u00f3n relativa act\u00faa exactamente como el posicionamiento est\u00e1tico pero permite mover un elemento en relaci\u00f3n a su posici\u00f3n actual\u00a0 con las propiedades CSS<\/strong>\u00a0top, bottom, left, right.<\/strong><\/p>\n.contenedor{\r\n padding: 5px;\r\n background: #588c7e;\r\n}\r\n.hijo-uno{\r\n position: relative;\r\n left: 20px;\r\n top: 10px; \r\n}<\/pre>\nPor ejemplo, si aplicamos la propiedad left con 20 p\u00edxeles, el elemento se mueve y desborda a su padre en 20 p\u00edxeles en el lado derecho. Si ponemos top 10px pasa a desbordar tambi\u00e9n el siguiente elemento.<\/p>\n
La raz\u00f3n 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\u00f3 del flujo del documento HTML. Por lo tanto, ya no funciona como un elemento posicionado est\u00e1ticamente.<\/p>\n
![\"posicionamiento](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/desbordamiento-bloque-posicion-relative.jpg\")
<\/a>position relative<\/p><\/div>\n
En general, no vas a utilizar las propiedades top, left, right y bottom con un elemento en posici\u00f3n relativa pero si queremos dejar un hueco y mover un elemento que lo ocupaba, puede ser una soluci\u00f3n.<\/p>\n
<\/p>\n
3-Posicionamiento CSS absoluto – \u00abposition: absolute\u00bb<\/h2>\n
Este valor para la propiedad CSS \u00abposition\u00bb nos permite utilizar esta vez de manera m\u00e1s correcta las propiedades top, left, bottom, right.<\/p>\n
Si ponemos ahora un posicionamiento absoluto al primer hijo, podemos ver como esta vez, el elemento hijo-uno esta \u201cignorado\u201d.<\/p>\n
Eso se produce porque la posici\u00f3n absoluta, retira el elemento del flujo del documento HTML. No queda espacio vac\u00edo.<\/p>\n
Todo lo dem\u00e1s funciona como si ese elemento absoluto no existiera. Eso hace que la posici\u00f3n sea absolutamente \u00fatil cuando quieres pegar algo en una posici\u00f3n espec\u00edfica pero no quieres que nada m\u00e1s se mueva a su alrededor.<\/p>\n
Y ahora si aplicamos la propiedad top con 0 pixeles, esta vez veremos que el elemento est\u00e1 arriba de nuestra pantalla.<\/p>\n
.hijo-uno{\r\n position: absolute;\r\n top: 0; \r\n}<\/pre>\nPasa eso, porque la posici\u00f3n absoluta posiciona un elemento dentro de alg\u00fan contenedor padre que puede tomar de referencia.<\/p>\n
Posicionar en funci\u00f3n de un elemento padre<\/h3>\n
En este caso, no puede tomar referencia de su padre directo porque est\u00e1 en posici\u00f3n est\u00e1tica. Lo que significa que no puede tener nada m\u00e1s posicionado absoluta o relativamente a \u00e9l.<\/p>\n
Para cambiar un elemento de modo que pueda colocar algo de forma absoluta o relativa a \u00e9l, debe usar uno de los otros valores de posicionamiento \u00abrelative\u00bb, \u00ababsolute\u00bb, \u00absticky\u00bb o \u00abfixed\u00bb<\/strong>.<\/p>\n.contenedor{\r\n position: relative;\r\n\/*** podr\u00edas ser absolute, sticky o fixed***\/\r\n}\r\n.hijo-uno{\r\n position: absolute;\r\n left: 20px;\r\n top: 10px; \r\n}<\/pre>\nAhora, nuestro elemento \u00abhijo-uno\u00bb en posici\u00f3n absoluta est\u00e1 ubicado en relaci\u00f3n a su elemento padre \u00abcontenedor\u00bb en posici\u00f3n relativa. Aqu\u00ed es cuando la posici\u00f3n relativa es muy \u00fatil.<\/p>\n
A este nivel, es importante saber que:<\/h3>\n
cada vez que un elemento tenga una posici\u00f3n que no sea est\u00e1tica, los elementos absolutos usar\u00e1n este como su padre para posicionarse en relaci\u00f3n a el.<\/p>\n
<\/h2>\n4-Posicionamiento CSS fijo- \u00abposition: fixed\u00bb<\/h2>\n
Es muy similar a la posici\u00f3n relativa pero hay algunas advertencias al respecto.<\/p>\n
Si ponemos el primer hijo en posici\u00f3n fija,\u00a0podemos ver que el elemento ignora totalmente la posici\u00f3n relativa del contenedor padre y se posiciona arriba de la pantalla.<\/p>\n
.contenedor{\r\n position: relative;\r\n}\r\n.hijo-uno{\r\n position: fixed;\r\n top:0;\r\n left: 20px;\r\n}<\/pre>\n![\"bloque-en-posicion-fixed\"](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/bloque-en-posicion-fixed.jpg\")
<\/a>Position Fixed<\/p><\/div>\n
Eso es porque los elementos en posici\u00f3n \u00abfixed\u00bb siempre se posicionan en relaci\u00f3n al documento HTML en su integralidad.<\/p>\n
Tambi\u00e9n algo realmente \u00fanico acerca de los elementos de posici\u00f3n fija es que permanecen en el mismo lugar cuando se hace sroll (desplazamiento hacia abajo o arriba en la p\u00e1gina)<\/strong>.<\/p>\n <\/p>\n
5-Posicionamiento CSS sticky- \u00abposition: sticky\u00bb<\/h2>\n
B\u00e1sicamente es una combinaci\u00f3n entre los posicionamiento \u00abrelative\u00bb y \u00abfixed\u00bb.<\/p>\n
.contenedor{ \r\n position: relative; \r\n height:200vh;\r\n}\r\n.hijo-uno{\r\n position: sticky;\r\n top:0;\r\n}<\/pre>\nA primera vista, si ponemos position sticky al primer hijo, da la impresi\u00f3n que se comporta normalmente.<\/p>\n
Pero al hacer sroll, en cuanto este elemento toca el top del documento HTML pasa a tener una posici\u00f3n fixed.<\/p>\n
Es lo que hace, que este valor sea muy poderoso. Por defecto es relative pero en cuanto hacemos scroll se transforma en fixed posici\u00f3n.<\/p>\n
Tambi\u00e9n debe especificar al menos uno de de las propiedades top, right, bottom o left para el posicionamiento sticky en funci\u00f3n de si va a ser\u00a0sticky<\/em>\u00a0en un scroll horizontal o vertical.<\/p>\n![\"bloque-posicion-sticky\"](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/bloque-posicion-sticky.jpg\")
<\/a>Position Sticky<\/p><\/div>\n
<\/h2>\n<\/h2>\n6-Algunos Ejemplos de c\u00f3digo con posicionamiento CSS<\/h2>\n-Dibujo de una Caja Sorpresa con CSS<\/h3>\n
![\"dibujo](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/cajasorpresaCSS.jpg\")
<\/a><\/p>\nEn este ejemplo, se utilizan las posiciones relativa y absoluta para poder dibujar los lazos de la caja.<\/p>\n
Pod\u00e9is encontrar todo el c\u00f3digo haciendo click aqu\u00ed en la imagen.<\/p>\n
<\/p>\n
<\/p>\n
-Men\u00fa de navegaci\u00f3n estilo caj\u00f3n CSS<\/h3>\n
En este caso, se posiciona en absoluto el caj\u00f3n que va apareciendo y desapareciendo a medido que pasamos encima de los elementos del men\u00fa de navegaci\u00f3n. Pod\u00e9is ver el c\u00f3digo haciendo click en la imagen.<\/p>\n
![\"menu](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/menunavegacionencajonCSS.jpg\")
<\/a><\/p>\n-Efecto Glitch con CSS<\/h3>\n
Para este ejemplo, os aconsejo jugar un poco con el c\u00f3digo y quitar la posici\u00f3n absolute a los elementos que la tienen para entender mejor. Porque en ese caso, tenemos una etiqueta <p>que contiene el texto, en posici\u00f3n absoluta. Y luego unos <span> que hacen con la propiedad clip-path un recorte.<\/p>\n
Haciendo click en la imagen, encontrareis el c\u00f3digo para jugar con el.
\n<\/a>![\"efecto](\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2021\/06\/glictheffectCSS.jpg\")
<\/a><\/p>\n <\/p>\n