Hello, there! Em CSS, existem muitas propriedades diferentes que podem ser usadas para fazer ajustes em uma determinada página.
Uma das propriedades mais comuns de serem usadas é a chamada position, que vai definir a posição de um determinado elemento na página.
E, para definir essa posição, existem 5 valores possíveis que podemos usar. Check it out!
Conheça a propriedade POSITION em CSS
Como dissemos, a propriedade position vai definir a posição de um determinado elemento em uma página. E, para isso, podemos usar 5 valores diferentes: static, relative, fixed, absolute e sticky.
STATIC
O valor padrão da propriedade position é static, que significa "estático". Quando um elemento tem "position: static", ele é posicionado de acordo com o fluxo normal da página, sem nenhuma alteração relevante em sua posição. Com static, não podemos usar as propriedades top (acima), right (direita), bottom (abaixo) ou left (esquerda).
RELATIVE
O valor relative significa "relativo". Um elemento com "position: relative" também é posicionado de acordo com o fluxo normal da página, mas agora podemos usar as propriedades top, right, bottom e left para ajustar sua posição relativa à sua posição original. For example:
.elemento {
position: relative;
top: 10px; /* Move o elemento 10 pixels para baixo */
left: 20px; /* Move o elemento 20 pixels para a direita */
}
FIXED
O valor fixed significa "fixo". Um elemento com "position: fixed" é posicionado em relação à janela do navegador e não se move quando a página é rolada. Assim, ele permanece fixo no mesmo lugar, independentemente do scroll.
ABSOLUTE
O valor absolute significa "absoluto". Um elemento com "position: absolute" é posicionado em relação ao seu elemento ancestral mais próximo que tenha position diferente de static. É como se você definisse a posição de um elemento dentro de outro elemento.
STICKY
O valor sticky significa "aderente". Um elemento com "position: sticky" alterna entre relative e fixed dependendo da rolagem da página. Ele é posicionado de acordo com o fluxo normal (ou seja, ele fica em uma posição relative) até que atinja um determinado ponto de rolagem, onde então se fixa na posição definida (fixed). For example:
.elemento {
position: sticky;
top: 0; /* O elemento ficará fixo no topo quando a página for rolada até ele */
}
Now you understand exactly what these values mean in English! (Agora você entende exatamente o que esses valores significam em inglês!)
Continue estudando com a gente no nosso artigo "Você sabe o que é SMOKE TEST?". See you!