Entendendo a propriedade position e as suas particularidades
Eai, galera! Mais um post da série <dividindo o conhecimento> 🙌 🙌
Antes de iniciar o post é necessário deixar claro que tudo o que será escrito nas linhas abaixo será um relato pessoal de forma simples e coerente a minha atual experiência e conhecimento, portanto deverá ter uma linguagem de fácil acesso e conteúdo esquematizado e “mastigado”. Vamos lá!
Hoje nós veremos um pouco sobre alguns valores para a propriedade Position, que são eles:
- Static
- Absolute
- Fixed
- Relative
- Sticky
Position Static
- Essa é a propriedade padrão, já vem por default e não é necessário declará-la, a não ser que você queira mudar o tipo de position.
- Ele não muda em nada o comportamento padrão do elemento.
- Com a position:static não adianta definir as propriedades : top, bottom, left e right, pois ela simplesmente não mudará de lugar.
Position Absolute
- O position:absolute faz referência ao elemento pai. Tomando como base o ponto superior esquerdo do elemento pai. E esse mesmo pai deve ter um position definido, porém deve ser diferente de static.
- Quando definido cria um novo contexto que fica a frente do browser.
- Logo, a div com position:absolute referencia sua posição pelo div mais próximo que o envolve e que também tenha um position definido, caso não haja essa div, a div filha irá se referenciar pelo body.
- Logo, é possível movimentar a div com os atributos: top, right, bottom e left.
- Com o uso dessa propriedade com absolute é criado um novo contexto diferente do contexto do pai, assim o elemento que está em um contexto diferente subirá para ocupar o espaço que sobrou (ele só subirá se estiver em um contexto diferente do elemento com o position:absolute)
Nesse esquema temos duas divs: uma com a class .green e outra com a class .blue. Na primeira situação podemos ver que somente a div com a class .green recebe a propriedade position:absolute, e como resultado temos que a div .green vai para um contexto a frente do contexto da div .blue a div que tem a class .blue sobe para ocupar o restante do espaço do contexto do browser. Depois é mostrado que ao se colocar position:absolute nas duas divs, ambas flutuam num contexto diferente do contexto do browser.
Position Fixed
- O elemento fica fixo na tela, mesmo rolando a página. Tomando como base o ponto superior esquerdo do browser.
- É semelhante ao position:absolute, porém com a diferença de que o elemento pai sempre será o body.
Position Relative
- O position:relative faz referência a ele mesmo. Ou seja, o seu ponto inicial é o seu próprio canto superior esquerdo.
- O deslocamento não afeta outros elementos, portanto um elemento pode ficar em cima do outro(dois elementos podem ocupar o mesmo espaço ou parcelas do mesmo espaço).
- Assim como no position:absolute é movimentar a div (ou outro elemento) com os atributos: top, right, bottom e left.
- Ex: Se eu quiser deslocar o elemento para a direção da direita eu preciso dar um valor ao left, porque ele vai aplicar esse valor na sua própria região do left deslocando assim o elemento para a direita.
Position Fixed
- Permanece fixo independente do que aconteça. Mesmo que você mova com a barra de rolagem o position:fixed permanecerá na posição indicada.
Position Sticky
- É uma mistura entre position:relative e position:fixed, onde o elemento irá se comportar uma hora como position:relative, em outra como position:fixed
- Aceita as propriedades bottom, left, right e bottom.
Esse foi o post de hoje! Tentei focar nas propriedades que mais usei, e que julguei mais importante e também um pouco mais complicada para entender, por isso algumas tem imagens com exemplos e outras não. 😄
Espero que o post te ajude nos estudos! Qualquer dúvida, feedback ou conversas use o espaço abaixo, todo feedback construtivo é super bem-vindo.
Valeu e até o próximo post! 👋
