Unidad 13. Posicionamiento. Flexbox. Grid (II)



13.2. Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo podemos desplazar la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estaría su posición normal. El desplazamiento siempre es respecto al elemento que lo contiene.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podríamos poner right: 40px; o left: -40px;.

Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para hacerlo hacia abajo.

Si no establecemos valores de desplazamiento el elemento no cambia su posición, por eso es muy común asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.


Enero-2019 (V 2.0)
Pág. 13.2
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.