position

A propriedade**position, encontrada noCSS, define como um elemento pode ser posicionado (renderizado) no documento (página). Essa propriedade (position**, que determinam como ficará a localização final do objeto, permitindo seu deslocamento, como será apresentado adiante.

position: fixed; <serve pra fixar um elemento na tela, quando scroll descer ou subir ele,
vai esta fixado seguindo o scroll>< no casso podemos usar as tags TOP, LEFT, RIGHT, BOTTOM>
<pra colocar onde o elemento vai ficar fixado>
position: absolute; <server pra posicionar um elemento em qualquer lugar da html>
position: relative; <server pra posicionar um elemento perante o elemento pai>

A propriedade CSS "position" é usada para controlar o posicionamento de um elemento dentro de um documento HTML. Existem vários valores possíveis para essa propriedade, cada um com seu comportamento específico. Aqui estão os valores mais comuns:

1. static: Esse é o valor padrão. O elemento é posicionado de acordo com o fluxo normal do documento. Qualquer valor que você defina para as propriedades top, right, bottom e left será ignorado.
2. relative: O elemento é posicionado em relação à sua posição normal no fluxo do documento. Você pode usar as propriedades top, right, bottom e left para mover o elemento em relação à sua posição original.
3. absolute: O elemento é posicionado em relação ao elemento pai mais próximo que tenha uma posição diferente de static. Isso permite criar layouts complexos, onde elementos filhos podem ser posicionados de forma independente em relação aos elementos pais.
4. fixed: O elemento é posicionado em relação à janela de visualização do navegador. Ele permanecerá na mesma posição, mesmo quando a página for rolada. É comumente usado para criar cabeçalhos ou rodapés fixos.
5. sticky: O elemento é posicionado de acordo com o fluxo normal do documento até que a janela de visualização atinja uma determinada posição, e então ele "cola" nessa posição. É frequentemente usado para criar menus de navegação fixos que desaparecem quando o usuário rola para baixo e aparecem quando o usuário rola para cima.

Aqui está um exemplo de como usar a propriedade position em CSS:

cssCopy code
/* Elemento com posição relativa */
.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
}

/* Elemento com posição absoluta */
.absolute-box {
  position: absolute;
  top: 50px;
  left: 100px;
}

/* Elemento com posição fixa */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}