Pare de chutar e aprenda a position: fixed #07

[@MarcoBrunoBR]

Galera já tinha subido esse vídeo só que a versão anterior está com um erro de edição. Desculpa a galera que já tinha feito comentário no vídeo anterior. Tirei um print dos comentários que já estavam lá: imgur.com/a/tSelhop

[@Gabi_Ramos]

Uma pergunta: No absolute, se ela estiver dentro de um elemento pai, para que ela obedeça o pai precisamos atribuir a ele qualquer valor de position que não seja o static certo? Ok. No fixed, o posicionamento de top, bottom, left e right acontecem segundo o tamanho do browser assim como no relative, então no fixed a lógica é a mesma? Se quisermos que o fixed tenha o tamanho e posição da div pai como referencia temos que mudar o valor de position do pai para diferente de static?

[@adachiluis]

5:00 Seria o height que foi repetido um com 40px e outro com 60px no mesmo objeto? Foi maus é que estou querendo entender porque tinha 2 height ali depois vi este comentário aqui.

[@tobeagoofy]

Brother, um amigo me indicou seu canal, eu relutei em assistir, pois já estava desistindo de aprender as funcionalidades do CSS, mas teus vídeos estão me salvando, melhor didática!

[@MarcoBrunoDev]

Fico feliz em conseguir ajudar :-)

[@agoapk]

um video de 2018 me salvando em quase 2022, abrigado Marco

[@MarcoBrunoDev]

Tamo junto!!!

[@CasalLealOriginal]

Doido! Se eu pudesse postar aqui um áudio, você poderia ouvir meus gritos de alegria!!!!!!!!!!! Assisti todos os videos da playlist, nunca a remova do KZbin. Tenho certeza que vai ajudar muita gente! Sou além de outras coisas, risos, programador (muito mais back do que front) a quase 35 anos. Nunca havia recebido uma explicação tão boa, tão clara e PRINCIPALMENTE os motivos de certos comportamentos de elementos e suas propriedades para qualquer um que trabalhe ou deseje, o meu caso, poder escrever um html com css entendendo realmente o comportamento das coisas. Parabéns! Obrigado por compartilhar seus conhecimentos!! Abraço

[@pulsewave67]

Com certeza está ajudando muito!!

[@cristiano_kirschnner]

esté me ajudando e muito irmão.

[@raphaelcazer8394]

Que série maravilhosa! A forma com que você começa todos os vídeos explicando os mesmos detalhes torna cada vídeo único, não necessariamente dependendo do anterior e isso facilita bastante a questão das consultas! Parabéns!

[@MarcoBrunoDev]

Valeu! Isso é algo que tento fazer em todos os vídeo, infelizmente alguns não dá por serem o andamento de um projeto, aí fica dentro de uma série :-)

[@Gabi_Ramos]

Cara, eslareceu muito minhas dúvidas sobre o comportamento do position, porque a galera geralmente explica superficialmente como ele funciona, aí ficam aquelas dúvidas de: "Mas porque a outra div some?", "Como resolver a centralização?", "Porque não empurrou pra baixo?". A galera que faz vídeos tutoriais não costuma explicar esses detalhezinhos que as vezes fazem a gente ficar quebrando a cabeça com position, float, e outros atributos. Valeu pela disposição em esclarecer esses pontos! 🌺😉

[@rebeca-felicissimo]

A melhor playlist que já vi sobre posicionamento no CSS, parabéns Bruno, continue postando vídeos, pare não. Ajuda demais a gente.

[@ericleirosario]

Nunca vi uma aula tão explicativa como essa, muito obrigado Marco ! aula muito mais que boa.

[@RodrigoMedeirosBrazil]

pqp! fiz uma maratona agora de manhã e assisti os videos. Eu só ia na base do chute! não achava uma fonte de informações abrangente quanto o conteudo q vc fez. parabéns e obrigado.

[@MarcoBrunoDev]

Valeu! Fucovque tenha gostado e que tenha te ajudado :-)

[@pulsewave67]

Olá Bruno, sou estudante, iniciante do curso de Analise e desenvolvimento de sistemas, estou aprendendo muito com seus vídeos, bastante didático!! Gostaria de pedir que se possível, você dar uma aula sobre Tags Semânticas, quero parar de chutar!!!kkkk Grande abraço e valeu cara..

[@Veronica-zb3dt]

Eu não estava entendendo nada dessa parte de position! Vi dois vídeos seus e me sinto muito feliz! Parabéns pela didática...torcendo pra fuçar nas suas redes e ter curso seu hahaha vlw!

[@leandroaugustonogueira9096]

Marco, que sabadão foi esse que eu tirei e quanto to aprendendo aqui de CSS anotando tudo para por em prática tudo, estava com muita dificuldade em posicionar os elementos agora ficou muito mais claro, depois de seguir todos os videos até aqui da série Pare de chutar o CSS!!! Depois praticar muito e ir acrescentando div's e mais div's para exercitar e testar bem!!! muito obrigado mesmo por esses excelentes!!! CONTEÚDO e muito conteúdo!!1. =]. S2

[@jrnalves]

Muito bom esses vídeos, parabéns, faz 1 mês que estou estudando posicionamento no css, e ficava tatiando no escuro até conseguir posicionar os elementos.. e com esses vídeos perderei menos tempo com testes e farei códigos muito mais acertivos. Parabéns e obrigado por compartilhar o conhecimento.

[@bekachan]

Você consegue explicar tudo de uma forma super detalhada, mas muito didática. Estou fazendo um curso de front-end, e assistindo a seus vídeos pra entender melhor alguns conceitos. Muito bom!

[@bartsilva5513]

muito show, estou aprendendo rápido e bem, didática excelente.... senti falta de algo no final! dai utilizei a ideia do padding-top no body e fiz um padding-bottom para não incobrir o final da página.

[@sidneicarmo5691]

Rapaz! Nem precisa "encher o teu saco" nas redes sociais e telegram! 😍 seus vídeos são super didáticos e motivantes de assistir. Mais uma fez meus parabéns! Você não imagina o quanto me ajudou e a preocupação que saiu da minha cabeça...agora eu realmente sei como formatar a estrutura de um site usando CSS (conhecimento adquirido apenas assistindo os teus vídeos). Mais um escrito com certeza!!! 😃😃😃😃😃😃😃

[@MarcoBrunoDev]

Fico feliz que tenha gostado :-)

[@mbs2488]

Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@yagojuan4041]

pqp mano, que playlist boa!! Explica de uma forma descontraida e muito facil de entender. Parabens!! Espero mais conteúdos como esse

[@vitormartinhodeoliveira2978]

Marco mando bem , valeu , gratidão.

[@carlosheitordiniz]

Cara, já tenho alguns anos de experiência e meu ponto fraco sempre foi o CSS, principalmente quando o assunto é position. Confesso que com suas explicações isso está mudando!! Seus vídeos são muito bons!! Obrigado.

[@vito207]

Vídeos muito bons. Me encaixei perfeitamente na situação de ter aprendido o básico de html e css e ter dificuldade na questão de posicionamento. E os vídeos foram muito bons para esclarecer minhas dúvidas. Valeu!

[@MarcoBrunoDev]

Por nada. Fico feliz que tenha aprendido :-)

[@JonathanDev88]

Melhor canal pra tirar as dúvidas do css, muito obrigado cara 👍

[@dvpatrick1203]

que video top, tirou todas minhas duvidas ,obgd!!!

[@felix_forex]

que aula top mano me salvou estava loco aqui quebrando cabeça com isso vlw

[@MarcoBrunoDev]

feliz em ajudar Felix! cola lá no Discord da CollabCode, quando tiver dúvida, pessoal sempre se ajuda: discord.gg/FP5UaAG

[@vitoriamoura8897]

Didática muito boa, propriedade aprendida com sucesso!!!

[@fabianoalvessantos8588]

Manero sua forma de esplicar,me salvou de um trabalho......Brigadoooo.....

[@MarcoBrunoDev]

É nois e obrigado

[@gomeskart]

Muito obrigado irmão, you safe my life

[@MarcoBrunoDev]

Valeeeeeu Paulo :-)

[@EduardoMatosFoto]

A série ficou perfeita, aprendi muito sobre o CSS, muito obrigado!!!!

[@VouUparDaSilva]

vlw, vou usar o codigo do baner q vc odeia mas para fazer aqueles botoes que ficam la em baixo no canto infeior direito, para adicionar algo como um cadastro e coisas assim.

[@Luca.sanctu]

O brabo 🔥

[@MarcoBrunoDev]

Valeu!

[@julianosilva4796]

Opa Bruno,queria um vídeo que explicasse a diferença de trabalho usando flexbox e usando div. Acho que é uma dúvida atual de trabalho para muitos, com relação boas práticas para facilitar a criação de layout de forma mais rápida e com código menor. Abraço

[@johnpaim667]

Ótima explicação, parabéns pela didática.

[@artur378]

Valeu irmão me ajudou!! 😀

[@pauloofranco5663]

Obrigado pelo vídeo e pela aula! Bem explicada!

[@nando22reis]

Fera demais!! Obrigado!!

[@MarcoBrunoDev]

Valeu! Fico feliz que tenha gostado

[@whcunha]

Obrigado cara....

[@MarcoBrunoDev]

Tamo junto

[@-JRS-]

muito bom! muito bem explicado!!

[@jhonyluz1640]

muito bom me ajudo muito

[@MarcoBrunoDev]

Tamo junto!

[@viniciushoffmannvieira6695]

Ganhou um inscrito

[@jeffersonsveiga]

Marco é possível usar display: flex e tbm usar position:fixed juntos? Parabéns pela didática, vc é um ótimo professor

[@paris8512]

excelente explicação.

[@Renatoapg]

Muito bom!

[@MarcoBrunoDev]

Fico muito feliz que tenha gostado. Cola aí pra trocar ideia com a comunidade no servidor do Discord: discord.gg/YeeEAYj

[@eudanielsilveira]

top

[@MarcoBrunoDev]

Topersom

[@100nomexd5]

Muito obrigado mano

[@absc367]

muito bom!

[@ullylima9953]

Muito bom! Sua didática é incrível 👏👏

[@wesleydcm]

Top

[@PrMarceloASilva]

Estou aprendendo muito sobre posicionamento, inclusive, coloquei no boy a padding-bottom: 50px, para a última linha ficar acima do botão.

[@MarcoBrunoDev]

Nice muito bom :-) Fico feliz que esteja aprendendo e evoluindo o role.

[@levyguimmaraes]

Ajudou demais

[@carlosmax2629]

Muito bom seus vídeos! Espero que vc faça bastante! Obrigado!

[@MarcoBrunoBR]

Fico feliz que esteja gostando :-)

[@wellsilva174]

belas aulas, me inscrevi no seu canal, você parece ter muita coisa para passar ! Abraços, e sucesso !

[@MarcoBrunoBR]

Fico feliz que tenha gostado Well. Amanhã vou fazer um vídeo sobre emmet.io :-)

[@mykemacedo7638]

Se tivesse uma foto ou uma cor de fundo de fundo, não poderia fazer, no body, o distanciamento, correto?

[@starlillies]

ótimo conteúdo :) muito obrigada pela dedicação!

[@MarcoBrunoDev]

Por nada. Fico feliz que tenha gostado

[@mateuscenteno9416]

Ficou faltando adicionar im "padding-bottom: 50px;" na tag body para que o conteúdo também não fique abaixo do botão verde!

[@mayconull]

Muito obrigado mesmo. Estava procurando como fazer esses codigos, valeu mesmo!

[@thiagolopes4163]

faz dos flex box e grid por favor

[@MarcoBrunoDev]

Estou devendo, mas farei

[@luisribeiro8741]

daria pra fazer o mesmo efeito com o sticky?

[@brilhandoprodutosdelimpeza5703]

Primeiro, gostaria de dizer que eu achei muito bom essa playlist que você criou, alias achei excelente, você está de parabéns!!! Mas eu fiquei com uma dúvida, porque assim, eu tentei colocar a propriedade padding-button no elemento body, porque meu texto ficou atrás do botão e não era possivel eu subir mais para ler, e não funcionou, nesse caso o que você sugeriria fazer? Muito obrigada

[@mateus.mscreative]

Pq tinha dois height no call to action? Aula muito top mano! Podia fazer um curso de Html e desenvolvimento web. Ia bombar. Parabeéns pela didática incrível.

[@MarcoBrunoDev]

Acho que só esqueci um height a mais kkk

[@joseedmario1446]

um pexis vale quantos pixeis?

[@foxfrito]

Muito bom! ;)

[@wellerson1833]

pqp me ajudou pakas.......

[@lokolan123]

Vlw mano, ótimo conteúdo!!! Agora não vai ser mais no chute. KKK

[@wellingtonaraujo5418]

esse Position ta muito parecido com o Float ... como faço pra diferenciar ?

[@claudiovital]

Marco, muito obrigado. "Maratonei" os 7 primeiro vídeos e você me tirou as dúvidas sobre position... Você tem algum curso na Alura?? Sou aluno lá.

[@JOAGOSTINI]

Cara, excelentes vídeos, vi toda a playlist de uma vez. Mas agora me peguei com a seguinte dúvida: por que o line-height: pode conter toda a altura do elemento e, ao mesmo tempo, centralizar o texto (uma só linha ou palavra)? Pesquisei sobre ele e segundo o site do Majur o line-height é calculado a partir do baseline da frase ou palavra. Bom, como ele é a altura da linha, acredito que o calculo corresponde a traçar uma linha imaginária a x pixels para cima a partir da baseline da palavra ou frase, é isso? Se for, como ele centraliza já que só acresce espaço em um sentido (para cima) e não nos dois (no caso, também para baixo)? Muito obrigado.

[@MarcoBrunoDev]

É isso sim. Mas tem uma outra propriedade chamada vertical-align e é por conta dela que fica centralizada por padrão

[@junior_santos_1994]

vc ensinou que width 100% faz com que ele ocupe 100% da tela, porem, como faco pra ele ocupar 100% de uma div apenas? ja que quando coloco position: fixed; em um elemento, ele pega as margens da tela e nao da div

[@lucasmendesribeiro4236]

Oi Marco, beleza velho? Cara, uma dúvida, porque utilizar uma propriedade para mover o eixo do elemento em vez de apenas alterar a porcentagem fixa (ex. reduzir 5%)? Qual a diferença? Abraço

[@MarcoBrunoDev]

Da forma que fiz a manutenção fica mais feliz, o 5% causará outros breakpointers

[@Ra40Fa]

onde está o link do github com o código do video . qual o github dele ?

[@RudneyLeal]

Não consigo te achar no Telegram de jeito nenhum

[@Thom.Zille.]

Ótimo vídeo. Ficou uma dúvida: quando vc "empurrou" o conteúdo para baixo do header usando padding no body, o margin-bottom do header não ficou sem sentido (inutilizável)?

[@MarcoBrunoDev]

Verdade ficou!

[@claudioadagio]

Que bom que te achei o fígado pela aula top

[@renatomartins6735]

Professor, porque quando eu coloco um padding ou margin 50% no meu body, ele não fica os ideais 50% em relação ao fixed, tipo assim no meu fixed eu coloquei 50% height ate ai tanquilasso juntamente com um padding ou margin no pixel fica bom, mas se eu tentar colocar porcentagem no body o conteudo fica super depois do fixed não é o mesmo calculo dos 50% height do meu fixed

[@MarcoBrunoDev]

Vixi! Não peguei a ideia, você tem um link com o código que esta fazendo? :-)

[@renatomartins6735]

@@MarcoBrunoDev Eu poderia colar aqui?

[@MarcoBrunoDev]

@@renatomartins6735 usa o codepen..io que vai ser mais feliz prara de ajudar

[@renatomartins6735]

@@MarcoBrunoDev HAHA valeuzao nem sabia disso achei bacana , o link codepen.io/anon/pen/pGVOBV eu fiz anonimo pq não tinha login ve se pega

[@diegooliveira1083]

Como não havia a imagem pra baixar eu fiz um header próprio, bem simples, sofri pra consertar alguns coisas, mas consegui colocar tudo no jeito pra começar a aula, ai quando chegou na hora de colocar o top do header como 0, o conteúdo do meu paragrafo está ficando por cima do meu header ao fazer scroll...tentei usar o transform: translateY(1) no header, pensando que ele viria pra frente de modo a encobrir o paragrafo durante o scroll, mas nada...alguém me ajuda kkkk

[@diegooliveira1083]

consegui usando z-index :D

[@sk890s9]

Esqueceu de dar o padding-bottom

[@ludsonoliveira8486]

meu header não fica clicavel, oque pode ter acontecido

[@MarcoBrunoDev]

oi Matt, tudo bem? manda sua dúvida lá no Discord, não sei já faz parte, mas se não faz já cola que é bem feliz! se eu não respondo o pessoal se ajuda: discord.gg/FP5UaAG

[@fkg1570]

o pessoal daqueles sites com xxx adoram esse banner no meio da tela

[@arthuralesi]

o qq aconteceu com isso "box-sizing: border-box; " ?

[@oipedim7714]

permite que o contexto continue dentro da caixa e nunca extrapole, é meio que delimitar o espaço dentro da caixa. E todo valor adicionado vai permanecer dentro da caixa.

[@alphag4363]

nao foi

[@alphag4363]

to entendendo tudo ! desculpe

[@alphag4363]

nao aprendi