Como utilizar position static?

Neste artigo veremos a definição de position static do CSS, como utilizá-la como também os casos em que ela é empregada da melhor forma.

Definição e como funciona a static

O valor de position static é o default de todos os elementos das páginas HTML, ou seja, sempre que criarmos um elemento novo no nosso projeto e não definirmos uma position, ela terá como valor static.

Um outro ponto importante é que a posição static não é afetada por top, left, right ou bottom

Então não é possível mover o elemento na tela com estas propriedades citadas  acima

E vale também mencionar que static não é posicionado de forma especial no HTML

Ele segue o fluxo do código se encaixando onde foi colocado

Regra no CSS

Podemos posicionar um elemento com static da seguinte maneira:

.seletor {
    position: static;
}

Porém não há necessidade pois o elemento já vem com essa posição por default

Formas de utilizar

Para ser sincero você apenas vai acabar utilizando static quando não definir uma posição para o elmento

Nos demais casos você irá preferir alguma posição que dará mais liberdade de movimento do elemento, como: relative ou absolute

Conclusão

O valor static já vem por padrão em todos os elementos HTML, então não precisamos setar esta propriedade

É bom lembrar que ele não é afetado por top, left, right e bottom

Ou seja, ele é como o nome diz: estático

Uma posição com utilização um tanto questionável, acaba apenas seguindo o flow do HTML

Então não há por que setar esta propriedade a um elemento, a não ser para sobrescrever uma regra herdade de outro

E é isso sobre static, obrigado por lerem até o fim, caso possível se inscrevam na nossa lista para receberem mais conteúdo e até o próximo!

Veja também nosso canal no YouTube!