Position Static

• Los elementos HTML por defecto tienen un position static.
• El elemento no sera posicionado en ningún lugar en especial.
• Se acomodara de acuerdo al flujo de la pagina.
• Las propiedades de top, bottom, height y right no funcionan.

Position Static

div{
    position: static;
    border: 30px dashed red;
}

Position Relative

• Es posicionado relativo a su posición normal
• Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento.
• Se puede utilizar top, bottom, left, right

Position Relative

div {
    position: relative;
    left: 50px;
    border: 4px solid green;
}

Position Relative

Position Fixed

• Se puede utilizar top, bottom, left, right.
• Se posiciona en relación con el area de visualización.
• Siempre permanece en el mismo lugar.

Position Fixed

div {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    border: 10px solid black;
}

Position Absolute

• Permitir desplazamiento respecto al punto de origen.
• El resto de elementos actúan como si no existiera el desplazamiento.
• Su espacio es ocupado por otro elemento.

Position Absolute

div{
    position: absolute;
    top: 40px;
    width: 400px;
    height: 400px;
    border: 13px solid green;
}

Position Absolute