CONCEPTOS DE POSITION
Antes de empezar a maquetar con la propiedad position, debemos de conocer los siguientes términos:
Espacio reservado
Es el espacio que ocupa un elemento en el navegador.
Flujo de rendimiento
Es el orden en el que se dibujan los elementos (de izquierda a derecha y de arriba a abajo). Hay que tener en cuenta que por defecto el punto 0,0 es la esquina superior izquierda.
Elemento posicionado
El valor tiene la prioridad position con un valor distinto a static (valor por defecto).
Sticking context
Es el orden en el que se apilan las cajas.
PROPIEDADES FUNDAMENTALES DE POSITION
Al posicionar un elemento se activan 5 propiedades que usaremos para mover los elementos en los tres ejes (x,y,z):
top
El elemento se moverá desde la parte superior a la posición que le hayamos indicado. Es importante saber que esta propiedad tiene preferencia sobre el Bottom.
bottom
El elemento se moverá desde la parte inferior a la posición que le hayamos indicado.
left
El elemento se moverá desde la parte izquierda (posición por defecto) a la posición que le hayamos indicado. Es importante saber que esta propiedad tiene preferencia sobre el Right.
right
El elemento se moverá desde la parte derecha, a la posición que le hayamos indicado.
Z-index
El elemento se moverá en el contexto de apilamiento, es decir moviendo el eje z.
Tipos de position
A la propiedad position, le podemos establecer los siguientes tipos de propiedades:
Static
Con position: static :
- El elemento no se posiciona y no podemos moverlo.
- Es el valor por defecto de todos los elementos.
Ejemplo con position: static
Creamos un div de color rojo y le aplicamos la propiedad position: static con posición superior de 20px.
div.rojo {
position: fixed;
top: 20px;
}
Podemos ver que por mucho que intentemos mover la posición, el div no se mueve.
Relative
Con position: relative :
- El elemento mantiene su posición y espacio reservado.
- Mantiene las medidas en el flujo de rendimiento.
IMPORTANTE: Usa la esquina superior izquierda de se posición, como punto de referéncia.
Ejemplo con position: relative
Creamos un div de color rojo y le aplicamos la propiedad position: relative con posición superior de 20px.
div.rojo {
position: relative;
top: 20px;
}
Podemos ver que el div de color rojo, se ha movido 20 pixeles de la parte superior.
Ejemplo con position: relative y elementos superpuestos
Creamos un div de color rojo y le aplicamos la propiedad position: relative con posición superior de 40px y creamos un segundo div de color azul con la propiedad position: relative.
div.rojo {
position: relative;
top: 40px;
}
div.azul {
position: static;
}
Podemos ver que el div de color azul, se superpone por encima del div de color rojo.
Ejemplo con position: relative y propiedades contradictorias
Creamos un div de color rojo y le aplicamos la propiedad position: relative con posición superior de 20px y posición inferior de 40px.
div.rojo {
position: relative;
top: 20px;
bottom: 40px;
}
Podemos ver que el div de color rojo solo se ha movido 20 píxeles de la parte superior, puesto que la propiedad top prevalece sobre bottom.
Absolute
Con position: absolute :
- El elemento pierde su posición y espacio reservado.
- El elemento se posiciona flotando en el elemento padre.
IMPORTANTE: Si no tiene elemento padre, usará el documento HTML.
IMPORTANTE: A los elementos de línea que tengan la propiedad absolute les podrás dar medidas (sin necesidad de usar display block).
Ejemplo con position: absolute
Creamos un div de color rojo y le aplicamos la propiedad position: absolute y luego creamos otro div de color azul.
div.rojo {
position: absolute;
}
Podemos ver que el div de color rojo flota por encima del div de color azul.
Ejemplo con position: absolute
Creamos un div de color rojo y le aplicamos la propiedad position: absolute y luego creamos otro div de color azul.
div.rojo {
position: absolute;
}
Podemos ver que el div de color rojo flota por encima del div de color azul.
Ejemplo con position: absolute sin contenedor
Creamos un div de color rojo y le aplicamos la propiedad position: absolute con bottom 0px y luego creamos otro div de color azul y le aplicamos la propiedad position: absolute con top 0px.
div.rojo {
position: absolute;
bottom: 0px;
}
div.azul {
position: absolute;
top: 0px;
}
Podemos ver que el div de color rojo flota en la parte de abajo de la web y el div de color azul flota en la parte superior.
Ejemplo con position: absolute con contenedor
Siguiendo el ejemplo anterior, al div de color azul lo meteremos dentro de otro div de color verde.
div.rojo {
position: absolute;
bottom: 0px;
}
div.verde {
position: relative;
}
div.azul {
position: absolute;
bottom: 0px;
}
Podemos ver que el div de color rojo flota en la parte de abajo de la web y el div de color azul flota en la parte inferior de su elemento padre (en este caso es el div verde).
Fixed
Con position: fixed :
- El elemento pierde su posición y espacio reservado.
IMPORTANTE: El elemento siempre usará el HTML cómo referencia.
IMPORTANTE: El elemento siempre quedará en la misma posición (por mucho que se haga scroll).
Ejemplo con position: absolute
Creamos un div de color rojo y le aplicamos la propiedad position: fixed y lo ubicamos en la parte inferior derecha de la web.
div.rojo {
position: fixed;
bottom: 0px;
right: 0px;
}
Podemos ver que el div de color rojo se queda fijo en la parte inferior derecha de la web.
Sticky
Con position: sticky :
- Es una mezcla entre position relative y fixed.
- Los valores top, left, bottom y right sirven para indicar cuando pasará el elemento a un comportamiento fixed.
Ejemplo con position: sticky
Creamos un div de color rojo y le aplicamos la propiedad position: sticky y le ponemos top 0px.
div.rojo {
position: sticky;
top: 0px;
}
Podemos ver que el div de color rojo se queda fijo en la parte superior.