CSS te ayuda a posicionar tu elemento HTML. Puede colocar cualquier elemento HTML en la ubicación que desee. Puede especificar si desea que el elemento se coloque en relación con su posición natural en la página o absoluto en función de su elemento principal.
Ahora, veremos todas las propiedades relacionadas con el posicionamiento CSS con ejemplos:
Posicionamiento relativo
El posicionamiento relativo cambia la posición del elemento HTML con respecto a donde aparece normalmente. Entonces, “left:20” agrega 20 píxeles a la posición IZQUIERDA del elemento.
Puede usar dos valores superior e izquierdo junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.
- Mover a la izquierda: utilice un valor negativo para la izquierda.
- Mover a la derecha: use un valor positivo para la izquierda.
- Subir: utilice un valor negativo para la parte superior.
- Mover hacia abajo: use un valor positivo para la parte superior.
NOTA − También puede usar los valores inferior o derecho de la misma manera que los valores superior e izquierdo.
Posicionamiento absoluto
Un elemento con posición: absoluta se coloca en las coordenadas especificadas en relación con la esquina superior izquierda de la pantalla.
Puede usar dos valores superior e izquierdo junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.
- Mover a la izquierda: utilice un valor negativo para la izquierda .
- Mover a la derecha: use un valor positivo para la izquierda .
- Subir: utilice un valor negativo para la parte superior .
- Mover hacia abajo: use un valor positivo para la parte superior .
NOTA − También puede utilizar los valores inferior o derecho de la misma forma que los valores superior e izquierdo.
Posicionamiento fijo
El posicionamiento fijo le permite fijar la posición de un elemento en un punto particular de la página, independientemente del desplazamiento. Las coordenadas especificadas serán relativas a la ventana del navegador.
Puede usar dos valores superior e izquierdo junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.
- Mover a la izquierda: utilice un valor negativo para la izquierda.
- Mover a la derecha: use un valor positivo para la izquierda.
- Subir: utilice un valor negativo para la parte superior.
- Mover hacia abajo: use un valor positivo para la parte superior.
NOTA − También puede usar los valores inferior o derecho de la misma manera que los valores superior e izquierdo.