Posicionamento dos elementos

O posicionamento em CSS permite que um elemento seja colocado em uma posição exata na página. Por este motivo, ele é muito utilizado na criação de layouts avançados.

É possível inserir um elemento em qualquer lugar utilizando um sistema de coordenadas. Este sistema pode ter como referência a janela do navegador, como na imagem abaixo:

Vamos supor que você precise posicionar um cabeçalho a 100px do topo da página e a 150px à esquerda. Podemos usar o seguinte código CSS:

h1 {
  top: 100px;
  left: 150px;
}

Ao declarar que o posicionamento de um elemento será absoluto significa que não haverá nenhum espaço vazio após ele ser posicionado na página.

O código para essa declaração é “position: absolute;”.

Para exemplificar, veja o código abaixo, que cria um boxe no canto superior esquerdo da página:

#box1
{
  position:absolute;
  top: 30px;
  left: 30px;
  background: red;
  width: 50px;
  height: 50px;
}

A diferença entre o posicionamento absoluto e o relativo é a maneira como ele é calculado. A posição relativa é calculada com base na posição original do elemento, pois existe uma movimentação relativa para a esquerda, para a direita, para cima ou para baixo.

Assim, o elemento ocupa um espaço após ser posicionado. O código para a inserção do posicionamento relativo é “position: relative;”.

Tente posicionar três imagens, relativamente, nas suas posições originais na página. Note como as imagens deixam um espaço vazio nas posições originais.

Veja também posicionamento em CSS. Clique aqui.

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
 https://youtube.com/criandobits

Tags: css | posicionamento

Seu computador está lento, travando ou dando tela azul? E toda vez que isso acontece você precisa gastar dinheiro com assistência técnica?

A verdade é que continuar sem esse conhecimento pode estar custando muito mais do que você imagina.

Você pode economizar centenas ou até milhares de reais ao longo do tempo fazendo você mesmo a manutenção dos seus computadores. E, se decidir prestar serviços, esse conhecimento também pode se transformar em uma fonte de renda, que pode variar de R$2.000 a R$5.000 por mês ou mais.

Tudo isso com aulas práticas, objetivas e focadas no que realmente funciona, sem enrolação:

✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

A decisão é sua: continuar gastando dinheiro sempre que o computador apresentar um problema ou aprender uma habilidade que pode fazer você economizar e até gerar uma nova fonte de renda.

👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: