CSS - Posicionamiento

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 posicione en relación con su posición natural en la página o absoluta 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 utilizar dos valores arriba y a la izquierda junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.

Mover a la izquierda: use 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 .

NOTE- Puede utilizar los valores de la parte inferior o derecha , así como de la parte superior e izquierda .

Aquí está el ejemplo:

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

Producirá el siguiente resultado:

Posicionamiento absoluto

Un elemento con position: absolute se coloca en las coordenadas especificadas en relación con la esquina superior izquierda de la pantalla.

Puede utilizar dos valores arriba y a la izquierda junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.

Mover a la izquierda: use 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 .

NOTE- Puede utilizar los valores de la parte inferior o derecha , así como de la parte superior e izquierda.

Aquí hay un ejemplo:

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

Posicionamiento fijo

El posicionamiento fijo le permite fijar la posición de un elemento en un lugar particular de la página, independientemente del desplazamiento. Las coordenadas especificadas serán relativas a la ventana del navegador.

Puede utilizar dos valores arriba y a la izquierda junto con la propiedad de posición para mover un elemento HTML a cualquier parte del documento HTML.

Mover a la izquierda: use 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 .

NOTE- Puede utilizar los valores de la parte inferior o derecha , así como de la parte superior e izquierda .

Aquí hay un ejemplo:

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>