CSS postion cheat sheet

CSS POSITON.

STATIC. es el posicionamiento por defecto del navegador poniendo los elementos segun aparecen en el html, dom. es como si no hubiera posicionamiento. si se pone static el navegador no hace caso de los left,right,top, botton.

RELATIVE el navegador conserva el espacio que habia despues de moverlo. los porcentages solo funcionan si esta el heigh del padre. Es inportante saber que el espacio dejado despues de desplazarse continuara reservado
ABSOLUTE. los elemenos se posicionan en base a su inmediato padre , posicionado, o sea que tiene posiciones relative,absolute o fixed. El espacio no es reservado.
El ancho de un elemento absolute depende de su contenido.

FIXED. como absoluta no reserva la posicion, se ajusta al contenido las cordenatdas se calculan segun el navegador o ventana asi que  nunca se escrolla. los elementos fixed quedan fijos pero se salen del flujo de colocacion.

Posicionamiento por ejes

Siempre son posiciones desplazadas desde el margen hacia adentro. Por ejemplo top 2px moviera el elemento desde el top hacia el centro o sea hacia abajo

Solo puede haber un posicionamiento vertical y uno horizonal, css solo toma uno si hay varios.

Horizontal left, right
Vertical -> top, botton

3 dimension- z-index

MARGIN collapse.

Los top and bootion margin colapsan. con elementos posicionados absoluto no colapsan https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing