Para entender más en profundidad este ejemplo recomendamos ver este video.
En este breve ejemplo vamos a aprender conceptos básicos de posicionamiento y a jugar un poco con ellos.
Si repasamos la definición de nuestro HTML
<p>
Bienvenides a un <em>nuevo</em> video de <strong>Diseño para todys</strong>
</p>
<p>
<a href="">Mi página web</a> es divertida
</p>
<div>
En esta oportunidad vamos a ver cómo funciona mucho contenido mucho contenido mucho contenido
</div>
<section>
la configuración display block y display inline.
</section>vemos que los tres elementos principales son un <p> (paragraph) y un div (contenedor) y ambos tienen la configuración display con el valor block, definida por defecto por el navegador o user agent.
Un elemento de bloque forma justamente un bloque que toma el ancho de su contenedor. Los navegadores insertan un salto de línea entre los elementos anterior y siguiente.
Recordá que habilitando las herramientas de desarrollador con F12, podés ver el layout de cada elemento.
Los navegadores definen los siguientes tags HTML con la configuración display: block por defecto.
Por otra parte, vemos que el tag <a> (anchor, el link) no define un bloque sino que se ubica en la misma línea que el contenido que está antes y después. La configuración display: inline hace que los elementos se ubiquen en forma contigua, respetando la separación adicional que definan padding, border o margin.
<a href="">Mi página web</a> es divertida
Si queremos tener los primeros dos contenedores en la misma línea, podríamos pensar en tener la propiedad display: inline pero eso haría que queden pegados. La propiedad width no produce ningún efecto, porque el tamaño del contenedor es el que le corresponde en base al contenido. Pero existe la opción inline-block que hace que los elementos se ubiquen uno al lado del otro con un tamaño customizable:
Si queremos que un elemento no se visualice, lo configuramos con display: none. El elemento no ocupará espacio, al contrario de lo que pasa cuando lo definimos como visibility: hidden, como nos cuenta este artículo.
Por lo general trataremos de que nuestros elementos se dispongan en un layout semi-automático, de manera que un agregado o un cambio en algún elemento no desacomode toda la página, entonces nos alcanzará con modificar la propiedad display (en estas variantes básicas o bien flex / grid que aprenderemos más adelante). Para algunos otros casos vamos a necesitar configuraciones extras como las que veremos a continuación.
Por defecto la posición es static, esto significa que un elemento se ubicará en la siguiente línea si tiene el atributo display block, o inmediatamente a la derecha si tiene el atributo display inline (más adelante veremos otras formas de configurar el display). Si queremos modificar las propiedades left, right, top, bottom o z-index, no tiene efecto.
Parad definir headers o footers de una página utilizamos la configuración fixed, como vemos en este video (la propiedad bottom lo posiciona al fondo):
Si querés crear un sticky footer podés leer este artículo.
Si cambiamos la posición a relative, el elemento toma como referencia el lugar que le corresponde dentro de la página. Si modificamos las propiedades top, left, bottom o right, se desplaza desde la posición que ocupa actualmente (si hacemos modificaciones en la página, se posiciona en la nueva ubicación donde debe aparecer). También podemos trabajar con la propiedad z-index para definir qué elemento se ubica encima de otro.
Si definimos un div nuevo con position: absolute y lo ubicamos como hermano de los 3 divs anteriores, se posiciona en un punto absoluto dentro de la página. Si por el contrario su contenedor es un elemento definido con position: relative, se utilizará como referencia para las propiedades top, left, bottom y right:
En caso de colisiones entre elementos, nuevamente podemos trabajarlo con la propiedad z-index.
Para entender el z-index gráficamente: https://twitter.com/_UmairHafeez_/status/1435116506162081796
Les dejamos material adicional para profundizar:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent