Como utilizar position fixed?

Veremos como utilizar a regra position fixed, as suas principais utilizações em projetos e como ela se comporta no HTML.

Definição e como funciona a position fixed

Com a posição no valor de fixed podemos fixar elementos na tela, meio obvio não? haha

Mas o grande detalhe é sua utilização: podemos criar um menu que acompanha a tela do usuário, ou um alerta de algo que está acontecendo no sistema com essa posição

Inclusive há um elemento de exemplo fixo no canto direito desta página. 🙂

Regra no CSS

Podemos posicionar um elemento com fixed da seguinte maneira:

.seletor {
    position: fixed;
}

Cuidados ao utilizar position fixed

Tenha em mente que essa posição não é para posicionar elementos do layout por sua facilidade de movimentar o elemento com esta regra

Quando você quer mais liberdade para utilizar as regras top, left, bottom ou right, talvez a posição mais adequada seja a absolute

Então você deve utilizar apenas para elementos que devem acompanhar o scroll do usuário, salvo raras exceções, é para este fim que deve ser reservado a position fixed

Conclusão

E é isso sobre fixed, 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!