CSS - Posicionamento

CSS ajuda você a posicionar seu elemento HTML. Você pode colocar qualquer elemento HTML em qualquer local que desejar. Você pode especificar se deseja que o elemento seja posicionado em relação à sua posição natural na página ou absoluto com base em seu elemento pai.

Agora, veremos todas as propriedades relacionadas ao posicionamento CSS com exemplos -

Posicionamento Relativo

O posicionamento relativo altera a posição do elemento HTML em relação a onde normalmente aparece. Portanto, "left: 20" adiciona 20 pixels à posição LEFT do elemento.

Você pode usar dois valores top e left junto com a propriedade position para mover um elemento HTML para qualquer lugar no documento HTML.

Mover para a esquerda - use um valor negativo para a esquerda .
Mover para a direita - Use um valor positivo para a esquerda .
Mover para cima - Use um valor negativo para o topo .
Mover para baixo - use um valor positivo para o topo .

NOTE- Você pode usar os valores inferior ou direito da mesma forma que superior e esquerdo .

Aqui está o exemplo -

<html>
   <head>
   </head>

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

Isso produzirá o seguinte resultado -

Posicionamento Absoluto

Um elemento com position: absolute está posicionado nas coordenadas especificadas em relação ao canto superior esquerdo da tela.

Você pode usar dois valores top e left junto com a propriedade position para mover um elemento HTML para qualquer lugar no documento HTML.

Mover para a esquerda - use um valor negativo para a esquerda .
Mover para a direita - Use um valor positivo para a esquerda .
Mover para cima - Use um valor negativo para o topo .
Mover para baixo - use um valor positivo para o topo .

NOTE- Você pode usar os valores inferior ou direito da mesma forma que superior e esquerdo.

Aqui está um exemplo -

<html>
   <head>
   </head>

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

Posicionamento Fixo

O posicionamento fixo permite que você fixe a posição de um elemento em um ponto específico da página, independentemente da rolagem. As coordenadas especificadas serão relativas à janela do navegador.

Você pode usar dois valores top e left junto com a propriedade position para mover um elemento HTML para qualquer lugar no documento HTML.

Mover para a esquerda - use um valor negativo para a esquerda .
Mover para a direita - Use um valor positivo para a esquerda .
Mover para cima - Use um valor negativo para o topo .
Mover para baixo - use um valor positivo para o topo .

NOTE- Você pode usar os valores inferior ou direito da mesma forma que superior e esquerdo .

Aqui está um exemplo -

<html>
   <head>
   </head>

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