position
Indica si un elemento estará posicionado en un lugar estático, relativo, absoluto o fijo dentro de la página
- static: Valor por defecto. El elemento se posiciona donde la página lo dibuje de forma natural. En este caso no sirven las propiedades top, bottom, right y left que veremos más adelante.
- relative: Parecido al anterior pero deja que desplacemos al elemento con las propiedades top, bottom, right y left que veremos más adelante.
- absolute: El elemento se posiciona en una capa superior, por encima del resto de elementos. Al contrario que en la posición relative, el hueco que ocupaba pasa a estar libre (como si se fuera a otra dimensión). Para moverlo tenemos 2 opciones:
- ◦ top, left, right, bottom: El elemento se mueve a partir de las coordenadas 0,0 de la página web. Es muy parecido al efecto que se da con la posición fixed pero el elemento no bajaría con el scroll.
- ◦ margin: Si lo movemos con margin, el elemento se moverá a partir de la posición que ocuparía originalmente. Esto lo hace mucho más parecido al comportamiento de relative, pero sin dejar ocupado el hueco original.
- fixed: El elemento se posiciona en las coordenadas indicadas con las propiedades top, bottom, right y left, dentro de la ventana del navegador. Aunque hagamos scroll , el elemento se mantiene en las coordenadas indicadas.
Ejemplos aquí