Curso CSS Completo: Aula 16 - Propriedade Position

[@programacaoweb]

Position é meio tenso né? Eu entendo, mas é uma propriedade importante. Tenta estudar melhor ela para conseguir usar quando precisar. Forte abraço!

[@AglerLopes]

Olá Professor! Eu criei uma div, com a class pai, e dentro da div pai coloquei outras divs, as quais eu estilizei colocando o fundo de cada uma. Mas eu queria que a div pai se deslocasse, então coloquei o position:absolute; Porque pelo que eu intende, no position absolute, o elemento não se move dentro de uma div pai, como no position relative, ele se move dentro da página, ou seja eles se move de forma livre. Mas acontece que quando clique open with live, a minha div pai e suas filhas desaparecem Então eu trocei, coloquei position:relative, Top:100px; E a div pai se moveu Porquê que não funcionou com o position:absolute?

[@leonardomendonca5155]

O mais importante nas aulas é anotar tudo o que se aprende. Fiz um bloco e todas as aulas eu anoto todas as propriedades. Nem sempre estou com tempo para assistir as aulas novamente então as anotações ajudam e muito . Muito didático seu conteúdo , vamos em frente . Abraços professor!

[@programacaoweb]

Um abraço Leonardo!

[@GeraldoSantana-sl1pn]

Concordo MN, também anoto tudo que eu aprendo nós cursos, seja no celular, ou no caderno. Bora pra cima💪 fuiiiii.

[@tofalindo1705]

vlw cara por esse curso gratis, eu aprendi tudo que eu sei hoje sobre Html graças e você! e agora estou aprendendo sobre Css com seu otimo curso!

[@programacaoweb]

Valeu! Grande abraço! 🤜🤛

[@michelpereiradasilva8360]

Eita! Essa aula eu vou precisar rever. Ainda fiquei com dúvidas!

[@gleyciannemaria4773]

Estou acompanhando as aulas desde o início do curso. Está sendo minha salvação, estou conseguindo aprender e entender muito. Obrigada pelo ótimo conteúdo, se um curso que está sendo liberado de forma gratuita já é perfeito como é, imagine o pago!!

[@antoniobruno7928]

Todas as aulas de css eu tenho achado até aqui "aula 16" bem tranquilo. Só tive dificuldades em algoritmos nas aulas de javascript. 😢

[@Tiago-Vicente_CS2]

Rapaz, absurdo, vc é um patrimônio pra sociedade, filantrópico, absurdo a didática, carisma; HTML concluído, finalizando css, rumo a js; será um prazer poder colaborar com as linguagens cobradas, afinal, vc merece de +, e isso aqui não pode acabar nunca, benefício imenso pra sociedade! Parabéns prof Dimitri vc é um fenômeno 👏👏👏🙌

[@programacaoweb]

Muito obrigado Tiago! Grande abraço!

[@Kim-Barroso]

essa aula foi uma das mais empolgantes ate agora top

[@CezarXGameR]

bom demais o vídeo, tá me ajudando muito, vou comentar em todos os vídeos como forma de agradecimento.

[@Matrix-io-z3z]

Aulas de ouro ❤🎉

[@washingtonrodrigues5310]

Rapaz, esclareceu demais a minha mente. Sempre bugava no position

[@programacaoweb]

Que bom! Abraço!

[@andrecdsantos]

Posicionar elementos na tela sempre foi um bicho de 7 cabeças para mim, até antes de ver essa aula. Já perdi dias tentando posicionar elementos na tela sem sucesso. Muitíssimo obrigado, estou fazendo todos os cursos.

[@programacaoweb]

Que bom André. Fico feliz que te ajudou. Um grande abraço!

[@pauloalmeida1732]

Parabéns excelente forma de explicar os conteúdos

[@programacaoweb]

Muito obrigado Paulo!

[@AndersonSantos-ur4nf]

Muito bom o conteúdo, parabéns.

[@SakaPaulo]

Aula top, valeu!🙏

[@gasparfranciscoti-bonitoci7130]

Incrivel a claridade. Obrigado.

[@programacaoweb]

Eu que agradeço por deixar seu comentário Gaspar. Abraço!

[@eduardariver7602]

Maratonando seus vídeos desde ontem, estou aprendendo muito com você, ótima didática, muito obrigado

[@andressapachecosimoes5346]

Essa eu assisti 3X, mas foi! Valeu prof!!

[@programacaoweb]

È assim mesmo. A propriedade position é meio complicadinha. Forte abraço!

[@DiogoSilva-lj8xf]

explicação perfeita!

[@programacaoweb]

Obrigado! Abraço

[@Everaldobass]

Excelente o conteúdo sobre propriedade Position.

[@programacaoweb]

Muito obrigado!!

[@amumu2760]

simplesmente maravilhoso

[@anatoly7326]

Ajudou demais. Muito obrigado

[@programacaoweb]

Valeu Lisandro! Eu que agradeço por comentar 👍👍

[@Tour_De_Bike]

nossa velhor seu conteudo me ajudou muito muito bom mesmo

[@naillathdev]

Cara que aula mais TOP! Depois da aula de display, comecei a adaptar o costume de ver primeiro a aula e depois fazer junto, isso deu uma clareada bacana. :) Aquele efeito parallax que o pessoal usa é feito com essa "position: sticky", né? Mais uma vez, muito obrigado pelo conteúdo professor Dimitri.

[@kinhotri]

Eu costumo fazer junto, pausando e voltando o vídeo. Vou tentar assistir primeiro e praticar depois pra ver se melhora.

[@mtheus_kalashnikov]

Eu podia usar o relative para alinhar o texto na div também? Como vc fez no final da aula

[@gustavomarquizeppe1217]

Valeu pelo conteúdo!

[@programacaoweb]

Valeu Gustavo! Forte abraço

[@fabiohenriquesabino]

Excelente aula, muito obrigado

[@programacaoweb]

Muito obrigado Fábio! Abraço

[@lucianohorta5976]

Parabéns pela aula, muito boa

[@programacaoweb]

Muito obrigado Luciano! Abraço!

[@cavalefabis2167]

maratonando aqui! jaja entro no curso do JAVASCRIPT! obrigado professor { }

[@programacaoweb]

Opa. Show de bola! Bons estudos!

[@Mk.mkinho]

obrigado pela aula

[@professorluisclaudio]

Muito bom. Obrigado.

[@juniordornelas4388]

Aula muito boa!

[@programacaoweb]

Muito obrigado Junior! Abraço!

[@Lanbyteach]

Top

[@vexxgamedev]

por favor me ajudem, quando coloco o código da última parte, a imagem transborda do conteiner, alguém sabe me dizer pq isso ocorre sendo que é a mesma imagem e mesmo código que ele usa no vídeo?

[@rafaeltakki]

tenho uma dúvida, a width do .centro fez com que a "box" do Centralizado ficasse até o final do container é isso? ai sim funcionou o text-allign pq sem a width 100% ele ja estava centralizado...correto?

[@programacaoweb]

Isso mesmo 👍

[@benmoraes5511]

24:50

[@benmoraes5511]

12:46

[@Lsantos021-z1x]

Geralmente é usado pra imagem né tipo um card de tênis aí coloca ele por cima com com algum tipo de efeito? Bom o entendimento que tive foi essa

[@programacaoweb]

Isso mesmo. Também para aqueles efeitos de carrinho de compras, você tem um ícone de carrinho de compras e em cima dele tem uma bolinha colorida com número de itens no carrinho, aquela bolinha com número usa position absoluta em relação ao icone de position relative. Abraço!

[@lucasgorzizadasilva540]

Olá professor, muito bom o vídeo e a didática, mas fiquei com uma dúvida, queria botar o elemento staticky totalmente no topo e na dieita mas não consegui, aparentemente ele não sai do lugar, sabe se tem alguma explicação para isso? obrigado.

[@programacaoweb]

Oi Lucas. A propriedade se chama "sticky" e não "staticky". Talvez você tenha escrito errado. Aqui um exemplo 👉bit.ly/3e7bgKL .Lembrando que essa propriedade faz o elemento ficar "grudado" apenas quando existe rolagem (scroll). Se precisar que fique no canto sempre use a position fixed. Abraço!

[@lucasgorzizadasilva540]

@@programacaoweb perfeito esse link me ajudou, o problema é que eu ainda não conhecia o 'float' então não conseguia movimentar a div sticky, e sim eu digitei errado mesmo, obrigado professor.

[@marciosena103]

Professor, uma dúvida: eu um elemento que é uma imagem e estou querendo colocar sobre esse elemento um “filtro” degradê com uma apacidade “x”, mas não estou conseguindo. A imagem não é exatamente um background e sim, um elemento mesmo. E sobre esse elemento eu gostaria de colocar um outro elemento de cor e aplicar uma opacidade, ou degradê, nele… e daí a imagem apareceria como se tivesse um filtro sobre ela. Mas não consegui ainda e nao sei se seria com esse z-index…. Poderia ajudar? E obrigado pelas aulas…. Abraço!

[@programacaoweb]

Oi Márcio. Você pode fazer isso tendo uma div "pai" que seja position:relative e uma div filho de efeito que seja position:absolute. Nessa div filho você pode usar a propriedade background-image: linear-gradient() para fazer o efeito degradê que quiser. Fiz um exemplo no codepen 👉bit.ly/3y86gMp .Forte abraço!

[@marciosena103]

@@programacaoweb Muito, muito obrigado pela gentileza e atenção na sua resposta. Estou adorando suas aulas, nunca tinha estudado sobre isso antes e estou curtindo bastante sua didática. Farei todos os cursos… kkkk Eu entendi o exemplo que vc fez e estou tentando compreendê-lo. Achei excelente sua atenção em ter criado um exemplo pra que eu pudesse perceber melhor. Minha dúvida persiste em: minha imagem não seria de background e sim, uma imagem simplesmente. Então pergunto: toda imagem que recebe um efeito precisa entrar como background? Ou toda imagem é background (seja com efeito ou sem)? Eu imagina que colocaria um elemento “imagem” e sobre ela outro elemento “degradê” e não um elemento só “imagem + degradê". Não sei se consegui explicar direito. Mais uma vez, muito obrigado!

[@marciosena103]

Acho q agora compreendi. Kkkkk… Eu “apaguei o CSS .efeito e ficou só a imagem… ou seja a imagem é um “elemento” e o efeito é outro elemento… Ok.. Outra dúvida agora… pq vc chama a class de “efeito red-blu” e no CSS vc coloca separando em .efeito e outra .red-blue e não .efeito red-blue como é na Class?

[@benmoraes5511]

10:50

[@marcosvinicios1850]

Boa Noite, no CSS é bom sempre começar com o pai das divs ?

[@programacaoweb]

Oi Marcos. Não há uma regra estrita sobre sempre começar com o "pai das divs" ao escrever CSS, mas é uma prática comum e muitas vezes recomendada. O seletor "pai" ou contêiner principal é frequentemente usado para definir estilos básicos que se aplicam a todo o conteúdo dentro desse contêiner. Ao começar com o contêiner pai, você pode criar uma base consistente para o layout e estilos, economizando tempo e esforço. Além disso, isso ajuda a manter seu código mais organizado e legível, facilitando a manutenção no futuro. Abraço!

[@gildocode7]

Dimitri sensensacionalllllllllllllll

[@MurilosilvaFX]

a aula tem 28 mnt mas parece que tem 5, e tão explicativa que nao tem como não entender!

[@delicodii5211]

❤❤❤❤❤

[@Nichell]

Eu to abandonando o position pra usar só flexbox e grid, oq acha professor?

[@programacaoweb]

Olá. Na minha opinião a propriedade position é ainda muito importante, mesmo usando flexbox e grid. Na maioria das vezes, essas propriedades são usadas em conjunto para alcançar layouts complexos e responsivos e não um em troca de outra. A propriedade que é mais "substituída" é a propriedade display, talvez você tenha se confundido. Abraço!

[@benmoraes5511]

2:03

[@gabrielmistery3659]

Uma pergunta oque me impede de usar o relativo pra posicionar todos meus elementos?

[@programacaoweb]

Oi Gabriel. Você pode usar o posicionamento relativo em todos os seus elementos em seu site se quiser, mas isso pode não ser a melhor escolha em termos de desempenho e escalabilidade. O posicionamento relativo é calculado com base na posição original do elemento, portanto, se você usar o posicionamento relativo em muitos elementos em seu site, isso pode afetar o desempenho, pois o navegador terá que calcular a posição de cada elemento com base em sua posição original. Isso pode tornar a renderização do seu site mais lenta. Além disso, o uso excessivo de posicionamento relativo pode tornar seu código CSS difícil de gerenciar e alterar no futuro. Se você precisar fazer alterações em seu layout, pode ser difícil entender como as mudanças afetarão outros elementos que usam o posicionamento relativo. Em vez disso, é recomendável usar posicionamento relativo apenas em casos em que você precisa posicionar um elemento em relação a sua posição original, e usar outras técnicas de posicionamento, como o posicionamento absoluto ou flexbox, quando apropriado. Isso pode ajudar a manter seu código CSS organizado e fácil de gerenciar no longo prazo. Forte abraço!

[@guilhermebueno2872]

22:00 erros que acontecem comigo as vezes kkkkk

[@programacaoweb]

Né 🤣 kkkk

[@webnews1746]

Para resolver a opacidade do elemento filho era só adicionar backgeound color em .centro também e definir a opacidade.

[@gabrielflorio4060]

Ia mandar essa dúvida agora kkkk

[@Michael-su8os]

@@gabrielflorio4060 Conseguiu resolver ? to tentando desde ontem e até agora nada kkk

[@gabrielflorio4060]

Não, parece que quando vc aplica opacidade a um elemento, todos os filhos deles terão opacidade. Não testei muito ainda, mas pelo que vi é isso. Tem que fazer 2 elementos distintos.

[@Michael-su8os]

@@gabrielflorio4060 Entendi, valeu

[@caioandrade5848]

Realmente bem complicado essa aula... mas creio que será descomplicada com a pratica.

[@programacaoweb]

Primeira impressão é assim mesmo Caio. Depois com tempo vira coisa do dia a dia. Forte abraço!

[@millena522]

Complicadinha essa aula, precisarei rever.

[@JeffersonDeveloper]

boooaaa

[@benmoraes5511]

12:47