contenedor principal


Se puede especificar que los elementos queden flotando a la izquierda o a la derecha de los que le rodean. Esto se consigue con la propiedad float.
float: right
float: left
El efecto de esta propiedad es bastante simple pero resulta muy útil para que el diseño de la página se adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado). La propiedad clear es complementaria a la anterior. Con clear se especifica que un elemento no admite un flotante sobre su izquierda, sobre su derecha o a ambos lados. También se la puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre algunos de sus costados.

position:absolute
left: 0

Las capas grandes son descendientes de un mismo elemento, así que están apiladas de acuerdo con la propiedad z-index.
Las capas pequeñas pertenecen a otro contexto de pila; son descendientes de la capa verde grande.

z-index 3
z-index 4
z-index 5
z-index 2
z-index 1

position:absolute
right: 0

EFECTOS VISUALES: propiedades position, z-index, float...

position: fixed