CSS - POSITION
Links
// POSITION
position: static; //normal position according to the normal flow of the page, is the default. Doesn't admit top, left, right
position: absolute; //Move freely in the parent container, or the one before, if there is none, the body element
position: relative; //Relative to its normal position, takes values (top, left...) makes the children with absolute position value, move only within the parent
position: sticky; //Stays in the same spot after scrolling
position: fixed; Similar to absolute, but container is the viewport always
// UNITS
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
// Relación entre display, float y Position
Cuando se establecen las propiedades display, float y position sobre una misma caja, su interpretación es la siguiente:
Si display vale none, se ignoran las propiedades float y position y la caja no se muestra en la página.
Si position vale absolute o fixed, la caja se posiciona de forma absoluta, se considera que float vale none y la propiedad display vale block tanto para los elementos en línea como para los elementos de bloque. La posición de la caja se determina mediante el valor de las propiedades top, right, bottom y left.
En cualquier otro caso, si float tiene un valor distinto de none, la caja se posiciona de forma flotante y la propiedad display vale block tanto para los elementos en línea como para los elementos de bloque.