Pare de chutar e aprenda a position: fixed #07

Поделиться
HTML-код
  • Опубликовано: 24 янв 2025

Комментарии • 116

  • @MarcoBrunoBR
    @MarcoBrunoBR 6 лет назад +24

    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
      @Gabi_Ramos 5 лет назад

      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
      @adachiluis 2 года назад

      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.

  • @agoapk
    @agoapk 3 года назад +2

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

  • @CasalLealOriginal
    @CasalLealOriginal 4 года назад +8

    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 RUclips. 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

  • @tobeagoofy
    @tobeagoofy 5 лет назад +17

    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!

  • @pulsewave67
    @pulsewave67 3 года назад

    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..

  • @raphaelcazer8394
    @raphaelcazer8394 3 года назад +6

    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
      @MarcoBrunoDev  3 года назад +1

      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
    @Gabi_Ramos 5 лет назад +2

    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! 🌺😉

  • @ericleirosario
    @ericleirosario 2 года назад

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

  • @Veronica-zb3dt
    @Veronica-zb3dt 3 года назад

    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
    @leandroaugustonogueira9096 3 года назад

    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

  • @rebeca-felicissimo
    @rebeca-felicissimo 3 года назад +2

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

  • @RodrigoMedeirosBrazil
    @RodrigoMedeirosBrazil 5 лет назад +2

    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
      @MarcoBrunoDev  5 лет назад

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

  • @sidneicarmo5691
    @sidneicarmo5691 4 года назад +1

    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!!! 😃😃😃😃😃😃😃

  • @bekachan
    @bekachan 4 года назад +1

    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!

  • @jrnalves
    @jrnalves 6 лет назад +2

    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.

  • @mbs2488
    @mbs2488 2 года назад +1

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

  • @vitormartinhodeoliveira2978
    @vitormartinhodeoliveira2978 3 года назад +1

    Marco mando bem , valeu , gratidão.

  • @bartsilva5513
    @bartsilva5513 2 года назад

    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.

  • @dvpatrick1203
    @dvpatrick1203 2 года назад +1

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

  • @carlosheitordiniz
    @carlosheitordiniz 6 лет назад +1

    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.

  • @yagojuan4041
    @yagojuan4041 5 лет назад +1

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

  • @felix_forex
    @felix_forex 2 года назад +1

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

    • @MarcoBrunoDev
      @MarcoBrunoDev  2 года назад

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

  • @vitoriamoura8897
    @vitoriamoura8897 4 года назад

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

  • @JonathanDev88
    @JonathanDev88 3 года назад +1

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

  • @artur378
    @artur378 3 года назад +1

    Valeu irmão me ajudou!! 😀

  • @vito207
    @vito207 6 лет назад +3

    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
      @MarcoBrunoDev  5 лет назад

      Por nada. Fico feliz que tenha aprendido :-)

  • @johnpaim667
    @johnpaim667 3 года назад

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

  • @fabianoalvessantos8588
    @fabianoalvessantos8588 4 года назад

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

  • @nando22reis
    @nando22reis 4 года назад +1

    Fera demais!! Obrigado!!

  • @pauloofranco5663
    @pauloofranco5663 3 года назад

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

  • @julianosilva4796
    @julianosilva4796 5 лет назад +2

    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

  • @jhonyluz1640
    @jhonyluz1640 2 года назад +1

    muito bom me ajudo muito

  • @VouUparDaSilva
    @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.

  • @gomeskart
    @gomeskart 3 года назад +1

    Muito obrigado irmão, you safe my life

  • @Luca.sanctu
    @Luca.sanctu 4 года назад +1

    O brabo 🔥

  • @-JRS-
    @-JRS- 3 месяца назад

    muito bom! muito bem explicado!!

  • @whcunha
    @whcunha 5 месяцев назад +1

    Obrigado cara....

  • @eudanielsilveira
    @eudanielsilveira 4 года назад +1

    top

  • @paris8512
    @paris8512 2 года назад

    excelente explicação.

  • @EduardoMatosFoto
    @EduardoMatosFoto 5 лет назад +1

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

  • @100nomexd5
    @100nomexd5 10 месяцев назад

    Muito obrigado mano

  • @absc367
    @absc367 Год назад

    muito bom!

  • @jeffersonsveiga
    @jeffersonsveiga 3 года назад

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

  • @levyguimmaraes
    @levyguimmaraes Год назад

    Ajudou demais

  • @wesleydcm
    @wesleydcm 3 года назад

    Top

  • @ullylima9953
    @ullylima9953 4 года назад

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

  • @viniciushoffmannvieira6695
    @viniciushoffmannvieira6695 Год назад

    Ganhou um inscrito

  • @thiagolopes4163
    @thiagolopes4163 4 года назад +1

    faz dos flex box e grid por favor

  • @Renatoapg
    @Renatoapg 5 лет назад +1

    Muito bom!

    • @MarcoBrunoDev
      @MarcoBrunoDev  5 лет назад

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

  • @PrMarceloASilva
    @PrMarceloASilva 5 лет назад +1

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

    • @MarcoBrunoDev
      @MarcoBrunoDev  5 лет назад

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

  • @wellsilva174
    @wellsilva174 6 лет назад +5

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

    • @MarcoBrunoBR
      @MarcoBrunoBR 6 лет назад +1

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

  • @carlosmax2629
    @carlosmax2629 6 лет назад +2

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

    • @MarcoBrunoBR
      @MarcoBrunoBR 6 лет назад +1

      Fico feliz que esteja gostando :-)

  • @luisribeiro8741
    @luisribeiro8741 3 года назад

    daria pra fazer o mesmo efeito com o sticky?

  • @mykemacedo7638
    @mykemacedo7638 3 года назад

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

  • @mateus.mscreative
    @mateus.mscreative 4 года назад +1

    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
      @MarcoBrunoDev  4 года назад

      Acho que só esqueci um height a mais kkk

  • @starlillies
    @starlillies 6 лет назад +1

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

    • @MarcoBrunoDev
      @MarcoBrunoDev  6 лет назад

      Por nada. Fico feliz que tenha gostado

  • @mateuscenteno9416
    @mateuscenteno9416 2 года назад +2

    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!

  • @brilhandoprodutosdelimpeza5703
    @brilhandoprodutosdelimpeza5703 4 года назад

    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

  • @mayconull
    @mayconull 5 лет назад

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

  • @joseedmario1446
    @joseedmario1446 4 года назад

    um pexis vale quantos pixeis?

  • @Ra40Fa
    @Ra40Fa 2 года назад

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

  • @lokolan123
    @lokolan123 5 лет назад

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

  • @RudneyLeal
    @RudneyLeal 2 года назад

    Não consigo te achar no Telegram de jeito nenhum

  • @wellingtonaraujo5418
    @wellingtonaraujo5418 5 лет назад

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

  • @wellerson1833
    @wellerson1833 6 лет назад

    pqp me ajudou pakas.......

  • @claudioadagio
    @claudioadagio 3 года назад +1

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

  • @foxfrito
    @foxfrito 5 лет назад +1

    Muito bom! ;)

  • @claudiovital
    @claudiovital 6 лет назад +1

    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á.

  • @lucasmendesribeiro4236
    @lucasmendesribeiro4236 5 лет назад +1

    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
      @MarcoBrunoDev  5 лет назад +1

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

  • @JOAGOSTINI
    @JOAGOSTINI 4 года назад +1

    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
      @MarcoBrunoDev  4 года назад +1

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

  • @junior_santos_1994
    @junior_santos_1994 4 года назад

    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

  • @Thom.Zille.
    @Thom.Zille. 4 года назад +1

    Ó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)?

  • @renatomartins6735
    @renatomartins6735 6 лет назад +1

    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
      @MarcoBrunoDev  6 лет назад

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

    • @renatomartins6735
      @renatomartins6735 6 лет назад +1

      @@MarcoBrunoDev Eu poderia colar aqui?

    • @MarcoBrunoDev
      @MarcoBrunoDev  6 лет назад

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

    • @renatomartins6735
      @renatomartins6735 6 лет назад

      @@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
    @diegooliveira1083 3 года назад

    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

  • @fkg1570
    @fkg1570 3 года назад

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

  • @ludsonoliveira8486
    @ludsonoliveira8486 3 года назад

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

    • @MarcoBrunoDev
      @MarcoBrunoDev  3 года назад

      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

  • @sk890s9
    @sk890s9 4 года назад

    Esqueceu de dar o padding-bottom

  • @arthuralesi
    @arthuralesi 5 лет назад

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

    • @oipedim7714
      @oipedim7714 5 лет назад

      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
    @alphag4363 3 года назад

    nao foi

  • @alphag4363
    @alphag4363 3 года назад

    to entendendo tudo ! desculpe

  • @alphag4363
    @alphag4363 3 года назад

    nao aprendi