Los position establecen en que punto de la página empieza a dibujarse. Por defecto position:static; que significa que empieza a pintarse en la coordenada p(0,0) del padre. Los siguientes DIV tienen un margin-top:5px;
Los static, no se le puede poner TOP, LEFT, RIGHT o BOTTOM porque nunca considera las coordenadas, por eso se les pusó el margin
con position relative los hijos siempre se posicionan con respecto al padre. Hay que indicarlo
Los relative si se puede usar coordenadas, los div internos ahora serán relatives y podrán utilizar coordenadas, incluso negativas. Entonces se relativisa el elemento hijo con respecto al origen del padre.
Los hijos de padres que sean div les pongo un display inline-block, para que se muestren hacía la derecha. o también puedo ponerles a los hijos el display:inline-block;
Siempre que el position sea static (default) o que sea relative sin indicar las coordenadas
Cuando se aplica el absolute, el div que lo tiene aplicado ya no es visible para los otros. En este caso el rojo es static y azul son static. El amarillo es absolute pero no se indicaron coordenadas. El verde es absolute pero tiene un top de 200px y left de 300px y por eso está volando en la página hasta arriba, porque toma como referencia el body o el padre superior que no sea absolute que sea relative o static pero que este especificado. En este caso el padre no tiene un position especificado, si se especifica position relativa tomara como orgien las coordenadas del padre nuevamente
Con eso los div se centran de forma vertical
el position fixed siempre es con respecto a body. Siempre ocupa esa posición aunque vaya abajo o arriba
El siguiente div siempre se queda en la posición que se le dijo
Aparece en la parte superio derecha de la página