CSS: Aprenda DE VERDADE css position: static, absolute, relative, fixed e sticky

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

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

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

    Curso Web Fundamentos: HTML, CSS e Javascript serfrontend.com/cursos/web-fundamentos-html-css/index.html

  • @rodrigomedeiros773
    @rodrigomedeiros773 2 года назад +20

    Seu curso de HTML/CSS e início de JS é espetacular! Não tem nenhum outro curso que entregue aulas tão aprofundadas que permita o aluno construir uma base tão sólida em html/css quanto o seu curso. Sempre indico o seu curso para amigos que estão iniciando na programação front end. Abraço professor!

    • @serliv
      @serliv  2 года назад +4

      Nossa Rodrigo. Muito obrigado. Confesso que fiquei emocionado aqui. Muito obrigado mesmo, pela mensagem e pelas indicações também

  • @lydson
    @lydson 24 дня назад

    Esse foi o vídeo mais completo que já vi sobre position. Muito obrigado. Tinha muitas dúvidas de quando usar cada um e ele é muito usado. Agora só praticar.

    • @serliv
      @serliv  24 дня назад

      Muito obrigado pelo feedback

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

    Boa! Esse é um tópico bastante confuso. Vai ajudar muito esse vídeo!

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

      Muito obrigado pelo feedback Marcos. Abração

  • @felipeleocadio8336
    @felipeleocadio8336 5 месяцев назад

    Em nenhum lugar a aula de posicionamento entrava na minha cabeça, apenas com essa aula ja consegui entender o que precisava, conteúdo muito top galera

    • @serliv
      @serliv  5 месяцев назад

      Show. Muito obrigado pelo feedback Felipe

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

    depois de tanto video, esse foi o único que eu assisti e aprendi kk.

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

      Que bom. Fico feliz. Forte abraço

  • @julitahan
    @julitahan Год назад +1

    Muito boa explicação. Estou começando a estudar e sem dúvidas suas aulas são as que mais me ajudam. Muito obrigada!

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

      Que bom Juliana. Fico feliz. Forte abraço e muito obrigado pela mensagem

  • @daviamerico2268
    @daviamerico2268 9 месяцев назад +1

    explicou bem, mas é muito mais complexo que isso, porque o bottom:0 nao joga o elemento pra final do html? mas so pra final da imagem atual sem scrollar?

  • @erikacristina2864
    @erikacristina2864 Год назад +1

    Explicação muito boa. Parabéns pela didática

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

      Eu que agradeço pela mensagem Erika. Abração

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

    Cara muito bom!!

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

      Muito obrigado Henrique. Forte abraço

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

    Poxa vida, professor! Ajudou muito, de fato consegui compreender o conceito e até apliquei, em um "Menu" feito da "Lista" e utilizando o antigo "Float"... Obrigado! ♥ ♥ ♥

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

      Que bom que ajudou. Muito obrigado pelo feedback

  • @simplificandoamusica8744
    @simplificandoamusica8744 Год назад +1

    Ótima aula professor!!👏🏼👏🏼👏🏼 Obrigado por disponibilizar está conteúdo… Deus abençoe !

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

      Muito obrigado. Valeu mesmo

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

    Meu amigo, pense em conteúdo que tá me ajudando mto no estágio. Hehehe mto b os seus vídeos.
    Posta vídeos de responsivo

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

      Opa. Muito obrigado pela sugestão. Pode deixar 😉

  • @D3adEndKL
    @D3adEndKL 2 месяца назад

    Obrigado pelo video, vou concertar as cagas que fiz no meu código kkkk

    • @serliv
      @serliv  2 месяца назад

      🤣🤣🤣💩

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

    Muchas Gracias serfrontend!!! show de bola.. abraço grande desde Argentina

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

      Muchas Gracias Carlos. Forte abraço

  • @carmemlima7034
    @carmemlima7034 5 месяцев назад

    Aulão! Parabéns! 👏🏻

    • @serliv
      @serliv  5 месяцев назад

      Obrigado 😃

  • @descubra6933
    @descubra6933 11 месяцев назад

    Melhor aula que já vi 👏👏👏👏

    • @serliv
      @serliv  11 месяцев назад +1

      Que bom que gostou ☺️

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

    Depois de ver o video no channel do Mano Deyvin, vim conferir a diferença entre positions.

    • @serliv
      @serliv  Год назад +1

      Hahahaha boa. É isso aí. Deve ter aqui no canal tb algo falando de objetos e classes kkkk

  • @bruno-pereirasantana2150
    @bruno-pereirasantana2150 Год назад

    Sensacional!!! Imagina o curso...

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

      hahahah... modéstia a arte, é muito bom :)

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

    Ótima didática. Valeu Professor...

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

      Muito obrigado :)

  • @LeandroSilva-mw5yl
    @LeandroSilva-mw5yl 2 года назад +2

    Olá, me ajude com uma questao, estou aprendendo front end, e me interessei em aprender o figma também para design. eu posso estudar um pouco o figma todo dia, e depois estudar programação também? não atrapalharia? muito obrigado.

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

      Eu não acho que atrapalha não pois são áreas bem diferentes. Mas isso é um achismo meu. Vale você tentar e ver se consegue absorver bem o conteudo dessa forma. Abração

    • @LeandroSilva-mw5yl
      @LeandroSilva-mw5yl 2 года назад +2

      @@serliv Obrigado pela resposta, a minha duvida foi pelo fato do figma entregar um css "pronto" para aplicar no projeto do vscode ainda (desculpa perguntar isso aqui é que você é a pessoa que mais responde a gente no youtube e bem rapido) rsrs

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

    Tmj monstro, agora é só ir praticando. Peguei a teoria.

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

      É isso mesmo. Abração

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

    Poderia fazer um vídeo mostrando todos suas extensões do vscode e tbm ensinar a configurar elas, por esse essa q quando vc salva o arquivo ele formata o conteúdo com espaços e tals, no js q ele coloca o ; no final do código, isso é muito útil, OBS: sou no seu no canal, nao sei se vc ja faz esse tipo de vídeo, vim pro seu canal pq adquiri seu curso de js na udemy.

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

      Obrigado pela sugestão Bruno. Abração

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

    Explicação matadora, fenomenal

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

      Que bom que gostou Gleydson. Abração

  • @rethman53
    @rethman53 11 месяцев назад

    Ola Daniel, tudo bem? Desculpe por nao ser relacionado com o video. Só queria saber que toque é esse. Eu achei quem canta e o nome, porem só o instrumental nao consigo.

    • @serliv
      @serliv  11 месяцев назад

      Sunset n Beachz - Ofshane . Acha na biblioteca de audio aqui no youtube

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

    Muito bom professor, muito obrigado!!!

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

      Imagina. Eu que agradeço

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

    Qual aplicativo é este que utiliza, para desenhar na tela?
    Obrigado pelo vídeo, compreendi muito melhor com sua explicação!

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

      Obrigado Wesley. O app chama zoomit

  • @onlineuniversitytech720
    @onlineuniversitytech720 5 месяцев назад

    Gostei muito!

    • @serliv
      @serliv  5 месяцев назад

      Que bom que gostou

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

    Esse vídeo foi muito esclarecedor

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

      Muito obrigado pelo feedback. Abração

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

    No caso do position absolute, sem nenhum elemento posicional ancestral, você disse que ele acompanha o scroll. No caso, não seria o contrário? Ele fica estático, pois não acompanha o scroll? Rs. Fiquei confuso.
    O que eu entendi, até então, é que se não tiver nenhum elemento posicional ancestral, o position absolute vai usar como referência o viewport em que foi construído / renderizado. Seria correto pensar assim?

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

      Oi Lucas. O position absolute sem nenhum ancestral posicionado acompanha a viewport, sim. Você está certo. Esse elemento com position absolute acompanha o scroll, normalmente.

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

    Otima didatica!

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

      Muito obrigado Thiago 😊

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

    Excelente explicação. Parabéns 👏👏👏

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

      Muito obrigado pelo elogio Vini. Abração

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

    17:51 Por gentileza, no exemplo, o senhor afirmou que vai voltar a se relacionar com o body, ao substituir a posição relative por static. Mas por que ele vai apontar (como "pai") para o body e não para o espaço reservado na tela da div static?
    Em outras palavras, ao usarmos o position static, não deixamos ele "preso/fixo" naquele espaço de tela, e ao fazermos com que uma div absolute fique dentro da div static, essa div absolute não deveria ter seu espaço contido dentro do espaço de tela que o static ocupa? Muito obrigado!
    Static
    Relative

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

      Sim. Mas o elemento posicionado absolutamente se referencia pelo primeiro elemento ancestral posicionado (absolute, fixed, sticky ou relative, ou seja, não se relaciona com um elemento que seja static).

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

    Usei isso exatamente hoje.

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

      Boa Felipe. Muito obrigado pelo feedback

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

    caso eu tenha uma div e não tenha a intenção de usar outra dentro com position absolute, é melhor colocar o position relative na div pai ou é indiferente ?

    • @serliv
      @serliv  10 месяцев назад +1

      Não precisa colocar position relative caso vc não queira "mover" essa div sem filhos com position absolute

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

    Material excelente

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

      Muito obrigado 😊

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

    Bom demais 👏🏻👏🏻

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

    ótima aula!!

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

      Muito obrigado Thaina

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

    Muito obrigado pela aula sobre position!!

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

      Imagina. Eu que agradeço pela mensagem. TMJ lucas

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

    Cara, VALEU!

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

      Nós que agradecemos!

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

    Agradeço demais. Tava com essas dúvidas.

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

      Espero ter ajudado. Forte abraço

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

    Muito bom. Só com esse vídeo ganhou um aluno para teu curso. Um só não, que com certeza vou indicar para mais pessoas. Essa já é a terceira, quarta explicação que eu assisto e a única que bem elaborada. Parabéns.

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

      Nossa. Muito obrigado pela confiança. Forte abraço e bons estudos

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

    Conteúdo top!

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

      Muito obrigado Renato. Abração

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

    Que vídeo perfeito

    • @serliv
      @serliv  Год назад +1

      Muito obrigado pelo feedback 😃

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

    Obrigado pelas dicas, professor!

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

      Eu que agradeço pela mensagem. Abração

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

    Vìdeo sensacional. Só não dou valeu pois estou desempregada e dura, mas merece, viu?
    E só para entender: Absolute fora de um div com posicionamento considera o viewport? Ou seja, se a viepowrt tem 500px de altura e o documento tem 1000px de altura ao todo, ele considera os 500px iniciais? Pois foi o que deu para entender no exemplo, já que ele não ficou a 10px do fim da page. Se for isso, deve ser complicado usar ele fora de outra div com positioning, pois resoluções idferentes ferram tudo.

    • @serliv
      @serliv  Год назад +1

      Não se preocupe com o "valeu" Annie. O meu canal tem por objetivo ajudar o máximo de pessoas que eu conseguir. Com relação à sua dúvida, você está certíssima. Normalmente usamos absolute dentro de outra div ou relacionado com o body quando queremos ele no topo.

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

    Qual o aplicativo que usa para fazer essas marcações na tela do computador?

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

      Chama-se zoomit... abraços

  • @Bo9611-sa
    @Bo9611-sa 5 месяцев назад

    mds que lindo. consegui aprender kkkkk

    • @serliv
      @serliv  5 месяцев назад

      Que ótimo! Muito obrigado pelo feedback

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

    dica que aprendi por acaso: No css, existe a propria propriedade z-index, basta setar o posicionamento que deseja que fique em primeiro plano, quanto menor o numero, mais ao final da fila ele fica. EX: z-index: 0; fica abaixo de z-index: 1; e assim por diante.

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

      Boa. É isso aí. Abração

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

    Valeu professor. Uma sugestão. Depois que traduzi os termos dessa aula, a compreensão ficou ainda melhor. Por exemplo: static, absolute, relative, fixed e sticky, traduzidos, ficaram: estático, absoluto, relativo e pegajoso. O termo sticky, como tradução pegajoso, ficou bem melhor de entender o final da aula. Acredito, que para quem tem uma noção de inglês, o aprendizado pode ser bem melhor e mais rápido.

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

      Ótima sugestão Rogério. Faz todo o sentido. Muito obrigado

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

    Muito bom 😀 parabéns pelo conteúdo

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

      Muito obrigado Jhony

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

    Show professor, conteúdo top! 👏👏

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

      Valeu Rafael, forte abraço

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

    Caramba 👏

  • @leandrohendrix6487
    @leandrohendrix6487 17 дней назад

    Top

    • @serliv
      @serliv  16 дней назад

      Valeu Leandro

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

    Muito obrigado

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

      Eu que agradeço Nikolas

  • @helder-rangel
    @helder-rangel 6 месяцев назад

    😄

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

    10:31

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

      ???

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

      @@serliv apenas marquei o tempo de onde parei a aula.

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

      @@benmoraes5511 gzuis.. se essa moda pega kkkkkk