O maior Problema com o Position Fixed do CSS

no vídeo de hoje eu quero explicar o problema por trás do position fixed e como que a gente pode solucionar esse problema quando a gente de fato quer algum elemento na tela posicionado fixamente no Browser vamos entender tudo isso no vídeo de hoje então vamos lá simbora ao conteúdo sem mais enrolação Olá pessoal tudo bom meu nome é Daniel você está no canal da ser antes da gente começar queria agradecer todos aos membros do canal obrigado pela força que vocês me dão e se você quiser me apoiar e se tornar membro também tamb O link

tá aqui embaixo tá outro recado que eu quero passar para vocês é que agora eu estou ministrando aulas particulares de html CSS e JavaScript se você se interessar O link tá aqui embaixo na descrição as vagas são limitadas e a outra novidade que eu quero passar para vocês é que eu tenho um canal no telegram e um no WhatsApp onde eu falo das novidades da serve coisas interessantes que eu encontrar eu vou disponibilizar lá para vocês então os links todos estão aqui embaixo na descrição confere lá agora sim o que você quer de fato é

aprender a trabalhar com position fix é isso que a gente vai fazer vamos lá simbora aqui na tela do meu computador Olha só eu criei uma página bastante simples aqui tá uma página bastante simples que eu tenho um menuzinho ali em cima que eu tenho aqui o logotipo home sobre e contato e este menu ele não está fixo no Browser né eles não está fixo aqui na no navegador tá rapidamente eu vou mostrar aqui o HTML não vou perder muito tempo aqui porque pelo amor de Deus né não tem nada demais aqui tá um HTML

extremamente simples nada demais aqui temos então aqui os nossos estilos É claro que eu já deixei meio que pronto porque eu quero que seja um tutorial extremamente rápido tá fiz aqui aquele o CSS reset da pessoa preguiçosa Pois é é esse Caraqui tá CSS reset do preguioso é ele mesmo que eu fiz Body Font Family tudo bem color Aqui começa aqui header tá Ah não criei classe não crii nada tá Fiz Do jeito mais simples e rápido possível tá muito bem Digamos que você aqui o nosso o nosso cabeçário nosso header posicionado fixamente O que

que a gente vai fazer eu vou adicionar aqui um position fixed top e left de zero quando eu salvar isso aqui repara o que vai acontecer aqui no canto aqui na parte superior do browser Vou salvar atenção 1 2 3 salvei repara O que aconteceu com o texto Hero banner né ele foi lá para cima por que que isso aconteceu pessoal pensa o seguinte lembre-se na verdade do que eu vou falar sempre que você trabalha com position fixed ou position Absolute O que você está fazendo é retirando aquele elemento do fluxo natural do documento eu

estou falando pausado de propósito que é para você fixar sempre que você trabalha com position Absolute ou position fixed você retira um elemento do fluxo natural do documento ok É como se ele não existisse para o restante do conteúdo da página por isso que posso até fazer o seguinte ó vou colocar opacity zero para você entender Vou salvar repara deixa eu colocar aqui um ponto do Olha só ponto do repara que pro nosso Hero banner pro resto do conteúdo é como se esse logotipo melhor se este header ele não estivesse ali por isso que tudo

subiu um pouco quer ver só eu vou comentar novamente tudo isso aqui ó repara a posição aqui por exemplo desse texto daqui ó do problema do position fixed Vou salvar repara que tudo desceu um pouco por quê justamente por conta disso porque o position fixed vai retirar o elemento do fluxo natural do documento tá então deixa eu voltar para cá e vou tirar esse opacity também que foi só para exemplificar Vou salvar Prontinho geramos aqui um problema como é que eu resolvo isso bom o jeito mais simples e Óbvio seria vir aqui no nosso Hero

banner por exemplo ten aqui ó Hero banner Eu já coloquei um comentario Zinho aqui espaço para compensar o header fixo se eu descomentar o margem top tudo vai descer um pouco certo vou salvar beleza Tudo desceu um pouquinho mas está bom isso aqui não não está bom por quê Porque se Amanhã sei lá o cliente pede sei lá para alguma coisa Que altere a altura deste header tá então sei lá o que que eu posso fazer aqui aqui no header para aumentar eu posso pegar o logo colocar uma fonte maior por exemplo eu vou exagerar

colocar 3,5 acho que vai ficar enorme né tudo bem ficou enorme Mas é para exemplificar apenas tá então repara eu aumentei o tamanho do meu da minha fonte do logotipo a altura do meu header Aumentou e deu aquele mesmo problema se eu vier aqui por exemplo no header e aumentar aqui ó o pading para TRS RMS em cima e embaixo Cadê o meu agora deixa eu diminuir um pouco o tamanho da fonte né cadê cadê cadê logo perdi aqui eu não lembro quanto que tava vou colocar 2,5 repara Olha só o título aqui embaixo então

se eu fizer alguma alteração na minha página que o tamanho do meu cabeçalho aumente eu preciso lembrar de alterar este valor daqui por exemplo ainda é pouco repara que dá um bocado de trabalho então isso aqui não está interessante tá como que a gente pode resolver isso de uma forma muito mais profissional eu vou tirar este margem top daqui não quero ele vou desfazer aqui o logo tava com 1 e me se não me falha a memória vou voltar para 1 e mail e aqui estava um RM se não me falha a memória certo era

assim que estava bacana temos esse probleminha aqui de parte do título está escondido atrás do meu cabeçário do meu header e uma maneira muito fácil pra gente resolver é trabalhar com o position stick Tá o position Stick ele vai funcionar como o position fixed quando este cara está ali em cima mas pro restante aqui do conteúdo ele vai se comportar como um position normal tá agora se você quiser saber como não utilizar o ABS por exemplo nas suas páginas da web eu vou colocar um card aqui em qualquer lugar na tela para você continuar aprendendo

confere lá esse vídeo Se você quiser saber como não utilizar o position Absolute fechado forte abraço Nos vemos no próximo vídeo até lá clica aí hein clica nesse Card aqui