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

No video

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

Рет қаралды 13,253

2 жыл бұрын

🔴#css #webdesign #webdevelopment
Pare de chutar e aprenda de uma vez por todas como trabalhar com css position:
- static,
- absolute,
- relative,
- fixed e
- sticky
🌟 Links comentados no vídeo e outros interessantes 🌟
🔴 Conheça meus cursos PREMIUM. SEM MENSALIDADES.
serfrontend.co...
📺 Análise de Portfolio / Projeto de iniciante
• Análise de Portfolio /...
📺 Playlist Mini-curso grátis de Chrome dev tools.
• Mini-curso grátis de C...
✅ CSS: Porque z-index: 99999 é uma PÉSSIMA escolha?
• CSS: Porque z-index: 9...
✅ TUTORIAL: Como construir um menu horizontal com CSS e para que serve o FLEXBOX
• TUTORIAL: Como constru...
✅ Dicas PRECIOSAS para criar seu PORTFOLIO - o 1º projeto do DEV FRONT END JUNIOR
• Dicas PRECIOSAS para c...
✅ 5 Dicas para criar SITES RESPONSIVOS
• 5 Dicas para criar SIT...
✅ 10 Dicas para EVOLUIR na carreira de programação web FRONT END
• 10 Dicas para EVOLUIR ...
✅ 01 - Analisando Portfolio de Iniciante em FRONT END
• 01 - Analisando Portfo...
✅ JAVASCRIPT: 10 dicas para ajudar a conseguir o primeiro emprego FRONT END
• JAVASCRIPT: 10 dicas p...
✅ O que estudar para conseguir o primeiro emprego como dev front-end
• O que estudar para con...

Пікірлер: 107

@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

@felipeleocadio8336 2 ай бұрын

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 2 ай бұрын

Show. Muito obrigado pelo feedback Felipe

@marknismo Жыл бұрын

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

@serliv Жыл бұрын

Muito obrigado pelo feedback Marcos. 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

@descubra6933 8 ай бұрын

Melhor aula que já vi 👏👏👏👏

@serliv 8 ай бұрын

Que bom que gostou ☺️

@erikacristina2864 Жыл бұрын

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

@serliv Жыл бұрын

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

@carmemlima7034 2 ай бұрын

Aulão! Parabéns! 👏🏻

@serliv 2 ай бұрын

Obrigado 😃

@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

@simplificandoamusica8744 Жыл бұрын

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

@serliv Жыл бұрын

Muito obrigado. Valeu mesmo

@misaelborges9572 7 ай бұрын

Muito bom professor, muito obrigado!!!

@serliv 7 ай бұрын

Imagina. Eu que agradeço

@jubesdevi Жыл бұрын

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

@serliv Жыл бұрын

Que bom. Fico feliz. Forte abraço

@bruno-pereirasantana2150 Жыл бұрын

Sensacional!!! Imagina o curso...

@serliv Жыл бұрын

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

@adelinomasioli 10 ай бұрын

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

@serliv 10 ай бұрын

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

@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

@carlosbalbastro2023 Жыл бұрын

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

@serliv Жыл бұрын

Muchas Gracias Carlos. Forte abraço

@highend3952 Жыл бұрын

Esse vídeo foi muito esclarecedor

@serliv Жыл бұрын

Muito obrigado pelo feedback. Abração

@marteusponthelli9393 10 ай бұрын

Material excelente

@serliv 10 ай бұрын

Muito obrigado 😊

@thiagosantana1485 Жыл бұрын

Otima didatica!

@serliv Жыл бұрын

Muito obrigado Thiago 😊

@onlineuniversitytech720 2 ай бұрын

Gostei muito!

@serliv 2 ай бұрын

Que bom que gostou

@thainaemboaba8680 7 ай бұрын

ótima aula!!

@serliv 7 ай бұрын

Muito obrigado Thaina

@henriqueh2820 Жыл бұрын

Cara muito bom!!

@serliv Жыл бұрын

Muito obrigado Henrique. Forte abraço

@FSMJr Жыл бұрын

Usei isso exatamente hoje.

@serliv Жыл бұрын

Boa Felipe. Muito obrigado pelo feedback

@ragnarok3307 Жыл бұрын

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

@serliv Жыл бұрын

É isso mesmo. Abração

@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

@anadycarvalho4925 Жыл бұрын

Ótima didática. Valeu Professor...

@serliv Жыл бұрын

Muito obrigado :)

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

@gleydsonbrito1717 Жыл бұрын

Explicação matadora, fenomenal

@serliv Жыл бұрын

Que bom que gostou Gleydson. Abração

@lammad Жыл бұрын

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

@serliv Жыл бұрын

Espero ter ajudado. Forte abraço

@renatoantuness Жыл бұрын

Conteúdo top!

@serliv Жыл бұрын

Muito obrigado Renato. Abração

@lucasviana5770 Жыл бұрын

Muito obrigado pela aula sobre position!!

@serliv Жыл бұрын

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

@viniclunc8553 Жыл бұрын

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

@serliv Жыл бұрын

Muito obrigado pelo elogio Vini. Abração

@GSD77770 Жыл бұрын

Que vídeo perfeito

@serliv Жыл бұрын

Muito obrigado pelo feedback 😃

@samoelhenrique3240 2 ай бұрын

mds que lindo. consegui aprender kkkkk

@serliv 2 ай бұрын

Que ótimo! Muito obrigado pelo feedback

@esqueceavinheta4794 Жыл бұрын

Obrigado pelas dicas, professor!

@serliv Жыл бұрын

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

@rafaelvasconcelos7848 Жыл бұрын

Show professor, conteúdo top! 👏👏

@serliv Жыл бұрын

Valeu Rafael, forte abraço

@Urbxx 10 ай бұрын

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 10 ай бұрын

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

@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

@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

@jhonyluz1640 Жыл бұрын

Muito bom 😀 parabéns pelo conteúdo

@serliv Жыл бұрын

Muito obrigado Jhony

@daviamerico2268 6 ай бұрын

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?

@EfraimCosta7 Жыл бұрын

Caramba 👏

@jholkis Жыл бұрын

Bom demais 👏🏻👏🏻

@serliv Жыл бұрын

Valeuuuuu

@EnzoAuditore Жыл бұрын

Cara, VALEU!

@serliv Жыл бұрын

Nós que agradecemos!

@annie.araujo Жыл бұрын

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.

@nikolassco Жыл бұрын

Muito obrigado

@serliv Жыл бұрын

Eu que agradeço Nikolas

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

@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

@wesleyaguiarlopes 9 ай бұрын

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

@serliv 9 ай бұрын

Obrigado Wesley. O app chama zoomit

@rethman53 8 ай бұрын

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 8 ай бұрын

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

@helder-rangel 3 ай бұрын

😄

@brunocunha5916 7 ай бұрын

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 7 ай бұрын

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