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!
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.
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).
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 */
}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.
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.
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!
Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!
Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.