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

[@serliv]

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

[@rodrigomedeiros773]

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]

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

[@lydson]

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]

Muito obrigado pelo feedback

[@polissecssus-o-voluptuoso]

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

[@serliv]

Muito obrigado pelo feedback Marcos. Abração

[@henriqueh2820]

Cara muito bom!!

[@serliv]

Muito obrigado Henrique. Forte abraço

[@jubesdevi]

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

[@serliv]

Que bom. Fico feliz. Forte abraço

[@julitahan]

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]

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

[@felipeleocadio8336]

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]

Show. Muito obrigado pelo feedback Felipe

[@erikacristina2864]

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

[@serliv]

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

[@carmemlima7034]

Aulão! Parabéns! 👏🏻

[@serliv]

Obrigado 😃

[@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]

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

[@jonaslima3410]

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]

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

[@xpeugames]

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]

Que bom que ajudou. Muito obrigado pelo feedback

[@bruno-pereirasantana2150]

Sensacional!!! Imagina o curso...

[@serliv]

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

[@simplificandoamusica8744]

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

[@serliv]

Muito obrigado. Valeu mesmo

[@carlosbalbastro2023]

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

[@serliv]

Muchas Gracias Carlos. Forte abraço

[@daviamerico2268]

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?

[@marteusponthelli9393]

Material excelente

[@serliv]

Muito obrigado 😊

[@descubra6933]

Melhor aula que já vi 👏👏👏👏

[@serliv]

Que bom que gostou ☺️

[@thiagosantana1485]

Otima didatica!

[@serliv]

Muito obrigado Thiago 😊

[@FSMJr]

Usei isso exatamente hoje.

[@serliv]

Boa Felipe. Muito obrigado pelo feedback

[@onlineuniversitytech720]

Gostei muito!

[@serliv]

Que bom que gostou

[@D3adEndKL]

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

[@serliv]

🤣🤣🤣💩

[@adelinomasioli]

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

[@serliv]

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

[@thainaemboaba8680]

ótima aula!!

[@serliv]

Muito obrigado Thaina

[@highend3952]

Esse vídeo foi muito esclarecedor

[@serliv]

Muito obrigado pelo feedback. Abração

[@misaelborges9572]

Muito bom professor, muito obrigado!!!

[@serliv]

Imagina. Eu que agradeço

[@anadycarvalho4925]

Ótima didática. Valeu Professor...

[@serliv]

Muito obrigado :)

[@gleydsonbrito1717]

Explicação matadora, fenomenal

[@serliv]

Que bom que gostou Gleydson. Abração

[@jholkis]

Bom demais 👏🏻👏🏻

[@serliv]

Valeuuuuu

[@ragnarok3307]

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

[@serliv]

É isso mesmo. Abração

[@renatoantuness]

Conteúdo top!

[@serliv]

Muito obrigado Renato. Abração

[@EnzoAuditore]

Cara, VALEU!

[@serliv]

Nós que agradecemos!

[@viniclunc8553]

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

[@serliv]

Muito obrigado pelo elogio Vini. Abração

[@lucasviana5770]

Muito obrigado pela aula sobre position!!

[@serliv]

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

[@brunocatan]

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]

Obrigado pela sugestão Bruno. Abração

[@lammad]

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

[@serliv]

Espero ter ajudado. Forte abraço

[@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]

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

[@Bo9611-sa]

mds que lindo. consegui aprender kkkkk

[@serliv]

Que ótimo! Muito obrigado pelo feedback

[@eulucaspedroabreu]

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]

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.

[@esqueceavinheta4794]

Obrigado pelas dicas, professor!

[@serliv]

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

[@wesleyaguiarlopes]

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

[@serliv]

Obrigado Wesley. O app chama zoomit

[@LeandroSilva-mw5yl]

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]

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]

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

[@rafaelvasconcelos7848]

Show professor, conteúdo top! 👏👏

[@serliv]

Valeu Rafael, forte abraço

[@jhonyluz1640]

Muito bom 😀 parabéns pelo conteúdo

[@serliv]

Muito obrigado Jhony

[@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]

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.

[@rogerio8710]

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]

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

[@rethman53]

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]

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

[@brunocunha5916]

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]

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

[@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]

Boa. É isso aí. Abração

[@semnomeporenquanto2]

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

[@serliv]

Chama-se zoomit... abraços

[@EfraimCosta7]

Caramba 👏

[@leandrohendrix6487]

Top

[@serliv]

Valeu Leandro

[@nikolassco]

Muito obrigado

[@serliv]

Eu que agradeço Nikolas

[@benmoraes5511]

10:31

[@serliv]

???

[@benmoraes5511]

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

[@serliv]

@@benmoraes5511 gzuis.. se essa moda pega kkkkkk

[@helder-rangel]

😄