HTML e CSS - Aula 04 - Como criar layouts de páginas Web sem apanhar do CSS?

chegou a hora de aprender a fazer layouts de páginas web e muita gente que desenvolve pra web Mesmo trabalhando profissionalmente apanha do CSS e apanha do CSS você vai descobrir o por eu vou explicar que não é necessário apanhar do CSS obviamente algum momento ou outro a gente vai acabar esquecendo uma propriedade CSS Então vou criar aqui uma pastinha aula quatro layouts e acaba que a gente esquece propriedade depois a gente fica lá ajustando isso é normal mas do jeito que a galera sofre Isso tá muito errado então você vai aprender aqui do jeito mais

eficaz para você fazer um layout eu vou criar aqui a página index HTML vou dar um zoom aqui meter um HTML5 pra gente show muito bom botar aqui ó layout sem apanhar o CSS Esse é o tema da aula porque a galera apanha demais e eu não entendo nem o porqu direito mas vamos lá vou pegar aqui o Pain vou fazer um layout macabro aqui ó um layout macabres vou fazer um layout aqui assim ó simples simples não vai ser responsivo responsivo a gente vai aprendendo um pouquinho mais pra frente pra gente poder conseguir entender

mais o CSS Vou botar aqui um banner Zão maluco lá top vou botar um menuzo aqui assim ó em cima do menu e do do Banner eu inventei esse negócio aqui eu quero mostrar um bagulho doido para você beleza aqui a gente vai ter uma área de conteúdo que nós vamos ter aqui uma primeira sessão vamos ter um texto aqui no meio dividindo nessas sessões sessão dois sessão dois e vamos ter uma outra sessão aqui embaixo top maravilhoso nós vamos ter aqui o conteúdo aqui dentro do conteúdo a gente pode botar um um texto aqui

ó pá pá pá pá pá vamos ter uma imagem aqui no meio ó pá e mais texto aqui do lado ó pá pá pá pá vai ficar lindo isso aqui cara muito bom Vou botar aqui também uma imagem e tem que terminar a aula com tudo isso aqui e vou botar um texto aqui assim pá pá pá pá Olha que louco hein layout doido muito bem que você tem que aprender a fazer cara a galera erra no CSS não porque erra no CSS erra no HTML Então a gente tem que entender que o navegador ele

renderiza um site de cima para baixo e da esquerda pra direita ou seja o seu htm ml se ele estiver errado você vai fazer o que for no CSS não vai dar certo Parça você vai começar a fazer gambiarra no CSS Então você tem que enxergar primeiro o HTML e se você enxergar o HTML você vai conseguir ter um CSS na paz do Senhor então o que que nós temos que fazer encontrar aqui os retângulos do layout todo layout é só retângulo então nós precisamos encontrar esses retângulos Então vamos encontrar alguns retângulos aqui eu vou

fazer esses retângulos com esse arredondado aqui só pra gente vê ó primeiro tem um retângulo aqui que é o topo né Beleza se tem esse retângulo que eu vou lá no código fazer encontrei esse retângulo eu vou lá no código e vou criar um cara aqui pra gente a gente quando cria um layout a gente tem algumas tags que são usadas no HTML5 Então como a nossa tag lá de cima ela é o cabeçalho eu vou chamar de header muito bem nós temos aqui o heer então o topo nosso tá aqui show de bola Observe

de cima para baixo da esquerda paraa direita Então tá aqui o primeiro cara excelente muito bom vou encontrar um outro retângulo aqui pera aí deixa eu ver quem mais tá para baixo dele bem esse cara tá para baixo é verdade esse cara é quem hum Esse Cara eu vou chamá-lo de logo então vou botar um cara aqui um div vou dar um ID para ele a gente vai identificar esses caras vou dar um ID para ele de logo por que que eu não dei um ID pro header porque o header é o header só tem

um header na página então ele é o cabeçalho beleza só que esse ID logo tá com comportamento diferente ele tá na frente dos outros então tem alguma coisa diferente com ele a gente precisa entender esse cara então vamos olhar para trás dele então quem está embaixo do header Ah nós temos aqui o menu por exemplo Então beleza o menu nós temos uma tag chamada nave no HTML5 então ele tá logo abaixo beleza só que nós chegamos agora nesse cara aqui Eita e esse cara aqui tem um retângulo aqui dá para ver tá claro tá desenhado

até né só que tem mais retângulo será Observe aqui ó nós temos um retângulo Aqui nós temos um retângulo Aqui nós temos um retângulo esses retângulos e imaginários que nós precisamos enxergar ou seja se você olhar pro seu layout conseguir o layout que você planejou e você conseguir enxergar esses retângulos Então você vai ser feliz na vida com o CSS então nós temos aqui ó um retângulo fora e nós temos três retângulos dentro esse esse e esse muito bem como é que a gente vai fazer isso no código para nós esse retangulo Zão grandão vai

ser uma section eu vou dar o nome dessa section de primeira que é a primeira section só e dentro dessa section como é que eu divido para dividir nós vamos botar um div um divisor Então vou pegar esse cara vou botar um ID nele aqui que vai ser o esquerda depois vou botar um ID que vai ser o meio Observe abri fechei abri fechei tudo fora um do outro agora eles todos eles estão dentro do section então eles estão dentro do section mas cada um deles está fora um do outro Observe isso é importante por

isso que é importante a gente dando Tab quando a gente vai escrevendo o próprio vs code já vai fazendo isso por nós ó ele já coloca na frente então a gente para de sofrer muito bem Bora lá e esse cara sessão dois que é um título que eu quero botar aqui por exemplo cara ele também é um retângulo olha só aqui o retângulo dele ó também tem um retângulo então eu vou colocar um div onde embaixo da primeira sessão essa que é a primeira sessão sessão primeira que é esse cara aqui esse section eu vou

colocar um outro cara aqui ó como ele é um título eu posso tacar aqui por exemplo um H2 para ele posso ou eu posso fazer para ele um div Vou colocar aqui título sessão beleza e aqui dentro a gente vai ter o título que eu vou botar aqui um H2 por exemplo que vai ser sessão dois depois a gente coloca um título que diz respeito ao conteúdo muito bem depois que nós temos Opa nós temos aqui um outro retângulo Olha que beleza Opa quer dizer que ele é uma nova section então uma sessão Então por

que que esse cara não fiz ser uma sessão porque eu não tenho conteúdo dentro dele is tem um título né Então para mim ele não é uma sessão Ah você pode usar pode estacar tudo div pode não deveria Mas pode então vou botar aqui a sessão chamada de segunda segunda sessão essa sessão ela tem uma imagem e tem um texto Observe ela tem uma imagem aqui e tem um texto Observe são dois retângulos então a gente precisa conseguir enxergar retângulos porque posicionar os retângulos vai ser mais fácil para nós então nós vamos colocar aqui esse

cara que vai ser o div e imagem segundo da segunda sessão e do lado dele tem um div que tem o texto da segunda sessão por que eu estou colocando esses nomes primeira segunda tudo mais cara eu não sei do que conteúdo É esse aqui eu não defino um conteúdo a partir do momento que você defini Ah cara isso aqui é a descrição é uma foto do arton cena isso aqui é o currículo do arton cena Então você deveria colocar aqui um nome que pudesse dizer respeito a isso de forma que você identifique melhor na

hora de você fazer o seu CSS então Observe cara nós fizemos a principal parte aqui que é o HTML quem erra no HTML vai errar no CSS vai ter que fazer gambiarra no CSS então se você aprender a enxergar retângulos sua vida vai ser feliz eu quero te mostrar aqui vou pegar um site grande aqui como já mostrei numa outra aula o site da Wall cara Observe é só retângulo preste atenção vou dar um botão direito inspecionar aqui quando eu dou um botão direito inspecionar ele abre para mim aqui o site da Wall eu vou

pegar aqui a setinha de inspeção Observe retângulo retângulo retângulo retângulo retângulo retângulo tem um retângulo em volta com mais retângulo aqui ó aqui ó Observe são vários retângulos e dentro desses retângulos eu tenho retângulo retângulo retângulo retângulo retângulo retângulo Observe tudo é retângulo para nós então se nós pegarmos Esse cara é um retângulo se nós pegarmos aqui é um retângulo que tem uma e um texto aqui nós vamos ter um retângulo em volta desses caras então nós sempre vamos ter retângulos aqui em volta então nós pramos enxergar esses retângulos imaginários Às vezes a pessoa fica

tentando posicionar no CSS tudo qual jeito e não consegue porque simplesmente não identificou os retângulos é simples é muito simples Então nós vamos aprender agora as propriedades CSS que vão nos ajudar a formatar esses retângulos e colocá-los na posição que nós queremos Bora lá lá primeira coisa que nós vamos fazer eu vou botar botão direito aqui review em file Explorer só pra gente poder abrir esse site vou dar botão direito aqui abrir com Chrome beleza tá maravilhoso olha como é que ficou bom ficou lindo né ótimo Nossa maravilhoso Beleza então lá vou eu eu vou

pegar aqui agora vou separar aqui em duas telas a minha tela só para poder conseguir mostrar para você o CSS sendo escrito e a gente já atualizar rapidinho Beleza eu vou criar aqui uma pasta CSS como a gente aprendeu numa outra aula vou criar dentro dessa pasta o style.css e o que eu tenho que fazer eu tenho que chamar esse arquivo Style dentro do cabeçalho da página Vou botar aqui link link HF CSS Style CSS e aqui nós vamos botar um Real Style sheet importante escrever certo se você não escrever certo não vai funcionar então

aqui está o X tem que est escrito certo não vai entender esse cara como CSS beleza feito isso quer dizer que a gente consegue agora formatar esses caras todos que estão aqui ah eles estão aqui né você tá vendo tô tá aqui ó vou inspecionar aqui para você ver Cadê o a setinha a gente só consegue pegar sessão dois mas o heer tá aqui o div tá ali Por que que eles estão desse jeito porque todo elemento que a gente cria que é um contêiner o header ele é um contêiner a section aqui é um

contêiner o nave é um contêiner o div é um contêiner ou seja são elementos que a gente usa para fazer com contêiner o que que é um contêiner uma coisa tem outras coisas dentro ela contém alguma coisa por ISS é um contêiner beleza todos esses caras eles tem zero de altura por isso que a gente não consegue ver nada a gente não vê espaço eles TM zero de altura então nós precisamos definir a altura deles e já pensando numa responsividade porém não ainda fazendo layout 100% responsivel porque a gente precisa adaptar algumas coisas para smartphone

tablet por exemplo então lá vamos nós primeira coisa que nós vamos fazer é definir o cabeçalho Então aqui tem um header pois se header ele tem que aparecer para nós então vou falar que eu quero formatar a tag header se eu quero formatar a tag header vou fazer assim ó vou colocar aqui uma altura para ela de 200 pixels como é que eu faço para vê-la só para enxergar a gente geralmente no CSS quando tá fazendo layout a gente vai botar um fundo nela Vou botar aqui um fundo maluco vermelho nela aqui ó salvei vou

lá no no meu browser e vou dar um F5 Olha que legal show de bola mas Observe que o header ele tá colado é ele tá com espaçamento em relação à página né Por quê Porque esse espaçamento é espaçamento do bari Então vou pegar o Bari e vou meter um louco aqui nele ó antigamente a gente fazia falar alguns browsers entendiam esse espaamento como a margem do bar a margem geralmente é o espaçamento do elemento para fora e não do elemento para dentro do elemento para dentro é o pading Só que alguns browsers entendiam de

jeito errado né entendiam como margem Beleza então o que a gente fazia a gente gerava mar gerava o pad para garantir de forma que a gente não precisasse não precisasse e corrigir alguma coisa depois então se você Zerou a margem Zerou o pading beleza ele colou agora ó o header colou Por que que ele colou Por que que ele ocupou a largura inteira da página por padrão toda tag de contêiner ela vai ocupar 100% a largura da página então sensacional a gente consegue fazer um esquema interessante aí simplesmente com a altura e não precisamos definir

a largura exceto se nós quisermos beleza dentro do cabeçalho eu falei que i colocar um banner né se eu vou botar um banner aqui dentro então eu preciso que esse banner ele eh exista né isso é importante muito bem Daqui a pouco a gente vai criar esse banner aí Observe que que a esses caras estão colados né colados aqui mesmo na esquerda daqui a pouco a gente mexe com isso bem próximo cara que eu vou formatar eu vou deixar formatar o logo por útimo Então vou pegar agora a nave o menu o menu eu a

tag nave Observe aqui ó tag nave Então nós não demos um ID bem não demos um ID só tem a tag nave ali mesmo show de bola eu vou falar que essa altura da tag nave vai ser de 80 pixels e vou falar que essa esse fundo vai ser Amarelo vai ficar lindo isso aqui tipo o site do McDonald's olha ficou até grande cara vou botar 60 aqui assim porque acho que tá muito grande isso aqui beleza F5 show de bola maravilhoso cara olha nosso leó tá começando a aparecer próximo cara que eu vou formatar

agora é a sessão um Como é que é o nome da sessão um Nossa não lembro vou lá ver ah é uma section com ID primeira Então vou pegar fazer assim ó vou meter aqui o ID primeira e dessa forma eu consigo formatar essa sessão bem quando eu tenho um conteúdo que não é uma coisa que eu vou controlar o tamanho tudo mais é um conteúdo ele pode ser grande pode ser pequeno então eu não vou dar altura para esse elemento do contrário eu vou ter um problema se o conteúdo estourar a altura vai ficar

aquele negócio quebrado o fim do elemento não vai vai cortar o conteúdo ou o conteúdo vai estourar o elemento então a gente e vai ter um problema com isso né então o que que a gente faz cara vou deixar sem altura e como ele tem filhos Eu vou agora começar a utilizar uma propriedade que é o da nossa aula que é o flexbox muito bem não tem segredo nenhum tá tá documentação do WC do w3c do CSS tudo de boa então nós vamos aqui fazer o seguinte ó e nós temos três caras aqui dentro três

filhos três filhos muito bem Olha que eu fiz que louco três filhos então lá vou eu como como são os nomes deles esquerda meio e direita muito bem como é que eu faço para deixar esses três com a mesma largura Parece que eles tem a mes mesma largura aqui parece mas pode ser que não então eu vou fazer o seguinte eu vou dizer que se eu quero se eu tenho elementos que são filhos eu vou fazer assim eu vou dizer que o pai ele é flexível ele é um pai flexível é um pai amoroso um

pai cuidadoso ele é Flex ele é flexível se ele é flexível eu preciso dizer qual como é a flexibilidade dele se a flexibilidade dele é para que os filhos fiquem numa linha ou que os filhos fiquem em colunas Então os filhos são uma linha ou são uma coluna um embaixo do outro aqui os filhos estão numa linha ou eles estão numa coluna um embaixo do outro Parece que eles estão numa linha Porque eles estão um ao lado do outro então quer dizer que a direção do Flex do pai é uma linha Row se fosse eh

um embaixo do outro seria colum mas para nós é Row quer dizer que nós falamos agora que os os filhos do da sessão chamada primeira como é a ID a gente colocou aqui o jogo da velha Os filhos vão ser flexíveis numa linha então um vai ficar ao lado do outro beleza são três dives eu vou fazer o seguinte como é que eu pego os três dives dentro da sessão primeira bem a sessão se chama primeira se eu quero pegar os três divs que estão lá dentro eu faço assim ó espaço div quando eu faço

espaço eu estou dizendo que esse cara está dentro desse então isso aqui para nós é um seletor CSS agora que começa a ficar diferente antes a gente usava só um nomezinho agora a gente entende que o CSS nos permite formatar várias tags e selecionar várias tags de diferentes formas Isso se chama seletor CSS seletor CSS seletor CS S muito bem então nós temos aqui todos os divs que estão dentro do primeira qualquer outro div não vai ser capturado aqui por esse seletor Então nós não vamos formatá-lo bem o que eu quero fazer com esses caras

eu quero dizer que eles são flexíveis em relação ao pai então eles vão se adaptar ao pai eu vou dizer que eles vão ter Flex um ou Flex true verdadeiro Flex um quer dizer que eles vão ser flexíveis em relação ao pai se você não acredita eu vou colocar aqui um fundo neles vou colocar um fundo aqui CCC cinza você vai ver que nada vai acontecer Observe Não apareceu nada por como eu falei toda a tag de conteiner não tem altura Mas você falou que não vai definir altura eu não vou definir a altura que

ele tem que ter mas vou definir uma altura mínima para ele Ó no mínimo esse cara vai ter 200 piels min então nós temos agora agora uma altura mínima Ah olha aí os três filhos estão aí se falando Não tô vendo tô vendo um não mas são três Observe 1 2 3 Ué por que que nós estamos vendo tudo como um então u é porque eles são flexíveis eles ocupam Todo o espaço disponível se o pai tem três filhos são 33% para cada um se o pai tem quatro filhos são 25% para cada um se

o pai tem cinco filhos são 20% para cada um então eles vão ocupar Todo o espaço fal não mas eu queria botar entre eles um um espaçozinho cara um espaçozinho ah is tem que você vai me fazer lembrar de algumas propriedades CSS que minha mente às vezes não lembra então vou botar aqui um cara que é o GAP vou botar um GAP de 10 pixels entre eles vamos ver se funciona Olha que legal cara o GAP ele é o espaço entre os filhos então eu venho aqui no pai e falo olha pai da um espaço

entre os filhos aí para não dar briga né cara então ele bota aqui ó GAP 10 perfeito cara maravilhoso nós estamos com o nosso layout agora ó quase lá sensacional muito bem vamos fazer agora o nosso próximo cara aqui que é a sessão dois acho que não temos que fazer nada na verdade nele né ele já tá aqui embaixo né show talvez a gente queira só fazer o alinhamento dele ao centro por exemplo Então vou pegar aqui esse cara qual que é o nome dele Ah é título sessão beleza título sessão e o que eu

tenho dentro do título sessão é um ID ali né título sessão então eu boto jogo da velha o que eu tenho dentro dele é um texto Então vou falar que esse texto vai ficar alinhado ao centro Observe text align Center coisa linda né cara maravilhoso sensacional e esse cara aqui bem Aqui nós temos um retângulo que nós já vimos e nós temos dois retângulos dentro dele só que esse cara ocupa duas partes das três partes né então esse cara tá ocupando aqui o t tá ocupando 2/3 e esse cara tá ocupando 1 ter só como

é que a gente faz isso será hein bem vamos ver algumas formas de fazer isso lá vamos nós nós temos aqui a nossa sessão que a sessão segunda bem eu preciso lembrando do Flex cara são três propriedades SS você preciso para ser feliz display Flex Direction e no filho Flex um se ele for flexível se ele for ocupar Todo o espaço disponível do pai muito bem então nós temos aqui eh essas esses dois filhos Eles estão numa direção de linha ou de coluna Eles estão numa direção de linha Eles estão numa linha então um está

ao lado do outro se um está ao lado do outro o display Flex do pai o que eu tô no no div na sessão segunda vou falar que a direção dos filhos é uma linha maravilhoso e como é que eu formato esses filhos bem vamos ver são divs também ó sensacional então vou falar que segunda espaço div eles vão ser flexíveis como você já sabe se a gente atualizar agora não vai ver nada por não tem altura o div segundo tá lá tá lá ó tá aqui ó só que ele não tem altura muito bem

então se eu pegar aqui e colocar uma altura mínima para ele vou fazer uma altura mínima de 200 pixels também bele e vou colocar um fundo nos filhos agora vou colocar um fundo Nossa aqui fica muito louco mano beje peix roroso e nós temos aqui dois filhos ó só que um tá ocupando o mesmo espaço do outro como é que eu faço para diferenciar isso bem eu quero que o texto e o texto Qual é o div dele o div é o texto Segunda eu vou pegar esse cara assim ó texos segunda e vou falar

que ele vai ser Flex 2 deixa eu ver se o dois vai resolver para mim muito bem ficou perfeito não ficou péssimo muito bem qual outra forma da gente resolver esse problema a gente pode dizer que os divis estão com Flex um que que é importante a gente fazer aqui de explicar um conceito no CSS a última configuração é a que vale só escrevendo no arquivo de cima para baixo aqui ó a última é a que vale então a gente tem que dizer aqui um tamanho que a gente quer por exemplo para esse cara se

eu quero que ele ocupe 66% eu vou fazer assim ó largura 66% muito bem essa é uma outra forma de nós fazermos um layout ficar responsivo pra gente ver o espaço entre os filhos vou botar um GAP 10 pixels aqui também ó só pra gente poder sempre que eu tô alterando eu tô salvando no CRL S F5 aqui muito bom ficou ótimo hein Ficou ótimo Ei eu peguei o cara errado só pode o texto segunda para nós está com o ID aqui texto segunda perfeito e ele é o segunda maravilhoso eu vou fazer assim ó

segunda texto segunda deixa eu fazer aqui falei para você que apanhado do CSS é clássico e é clássico mesmo ótimo muito bem então nós temos aqui um layout ele não está obedecendo o tamanho que eu quero largura certeza que é o Flex Vamos ver isso garoto o Flex ele faz com que a nossa largura ocupe Todo o espaço de forma proporcional então se eu tenho dois filhos eu falei que o Flex ele é Flex um então ele vai ocupar 50 % para cada um beleza então nós temos aqui uma largura agora que eu falei olha

no mínimo a largura vai ser 66% muito bem então vou trocar aqui de min min wid para de wid para min wid eu vou tirar esse cara aqui que eu tava suspeitando ele fale achei que tava na prioridade do div pai não estava muito bem então vou dar um F5 aqui show de bola como eu meti aqui esse cara já não tá obedecendo mais um comportamento Flex então para nós eu fiz uma burrice aqui eu botei o GAP no filho e não no pai né então vou botar aqui agora ó no pai beleza vamos dar

F5 show de bola então nós temos um GAP entre eles esse cara ocupa no mínimo 66% o que que é importante quando a gente quer fazer uso de porcentagem cara se você definiu uma porcentagem num elemento e você definir o espaçamento entre eles margem por exemplo você vai apanhar um pouco se você definir porcentagem no outro por quê Porque cara você vai ter você fala assim ué se esse ocupa 66% e esse ocupa 34% Ué e esse 10 aqui vai ficar como se você definiu que as larguras vão dar somando as duas 100% Esse cara

vai sobrar e vai gerar uma barra de rolagem aqui embaixo então o que você tem que fazer você tem que tomar um cuidado com isso se um elemento ele tem largura o outro elemento ele é flexível então se você consegue fazer isso você vai garantir que o seu layout não Gere barra de rolagem horizontal que é péssimo né gerar uma barra de de rolagem horizontal é péssimo então nós temos aqui a formatação nosso layout tá lindo quem que tá faltando o div logo muito bem vou fazer o logo agora isso aqui é só um treino

pro crazy people hein o crazy people que é o nosso projeto aí que vai começar a ser desenvolvido já já nas aulas Cara isso aqui é só um treino eu vou botar agora o logo aqui em cima eu quero que ele fique aqui em cima né e tem uma posição bem marcá não tem ó nossa ele corme até um pedaço da section cara por que eu desenhei desse jeito hein só para apanhar mesmo bem quando eu quero um elemento que ele fique na frente dos outros eu vou falar que ele vai ter um posicionamento absoluto

ou fixo e eu vou lhe mostrar a diferença entre eles o que que é um posicionamento absoluto é o seguinte deixa eu pegar aqui na página aqui na página esse cantinho aqui é o canto 0er zer zer do quê zero left e zero top Ou seja é a distância do Topo Qual a distância do Topo aqui zero qual a distância da esquerda aqui zero então se eu venho aqui ó eu já tenho uma posição tipo 100 100 100 pixels em relação ao topo 100 pixels em relação à esquerda E é o que a gente quer

fazer com o logo ó a gente quer posicioná-lo ou seja o posicionamento dele não é um posicionamento relativo todos os outros T posicionamento relativo Observe Esse cara é relativo a esse esse cara é relativo a esse esse cara é relativo a esse esse cara é relativo ao de cima então o posicionamento dos elementos ele é sempre relativo Esse é o padrão Porém quando eu quero colocar um elemento na frente do outro eu preciso usar ou absoluto ou fixo então nós vamos colocar aqui vou falar que é top 100 pixels e left 100 pixels muito bem

vou dar um atualizar nada aconteceu por quê Porque eu não dei a ura nem largura para esse div logo então vou fazer uma largura para ele vou botar aqui a largura de 200 pixels nele como eu acho que ele é um quadrado Vou botar aqui uma L uma altura também de 200 pixels muito bem agora el está quadrado Por que que a gente não viu porque a gente não tem fundo então vou ter que colocar um fundo nele aqui também vou botar um fundo azul aqui 00c muito bom Olha ele aí Olha ele aí olha

tá muito para baixo eu vou botar uns 80 aqui 80 olha ele aproximou eu subi tá um pouco mais próximo do topo um pouco mais próximo da esquerda ele tá com 80 beleza que que L que eu fiz mesmo ah pouquinho né pouquinho para cima então né um golinho golinho de nada então vou botar aqui 60 65 para ficar igualzinho o layout que eu fiz no rascun zoado olí ficou bom agora hein Muito bem tá maravilhoso esse cara excelente o que que nós temos aqui dentro nós temos agora um div com posicionamento absoluto mas eu

quero mostrar para você uma coisa o que que é absoluto e o que que é fixo eu vou botar um texto aqui ó cheio de BR texto a gente bota dentro um parágrafo geralmente né V dar aqui um mon de contol c contol v aqui ó lá vamos lá excelente deixa eu ver se já foi suficiente isso já foi suficiente Você tá vendo que o o div ficou lá em cima você fala não cara eu quero que quando rolar o div fique então pera aí pera aí então nós temos que mudar esse cara esse cara

não vai ser um posicionamento absoluto ele vai ser um posicionamento fixo Olha a diferença do fixo o absoluto Opa o fixo ele fica fixo se você rolar a página ou não e o absoluto o absoluto ele fica Ah ele fica fixo na rolagem ou seja o absoluto ele rola junto com a página o fixo sempre vai ficar naquela posição então às vezes a gente quer fazer por exemplo uma barra aqui embaixo qu a gente tem aplicativos Pô legal essa barra é fixa ela não é absoluta ela não rola Ela fica fixa o tempo todo ali

então Ah não eu quero que o menu ele quando rolar eu quero que ele fique lá no topo Pô legal vamos fazer isso no menu aqui se eu lembrar né inventei isso agora eu quero que o menu ele tenha um posicionamento que é o position é um outro tipo de posicionamento que é o position Stick eu acho que é top Zero Daqui a pouco a gente vê deixa eu só lembrar dessa propriedade Observe o menu tá aqui na posição ó só quando eu rolo ele fica no top zero ó Ou seja a distância dele em

relação ao topo é zero Pô legal Caramba então nós temos quatro tipos de posicionamento relativo absoluto fixo e Stick o Stick ele rola e fica fixo lá em cima isso foi feito realmente para menu a gente faz uma uma um menu que ele tem numa determinada posição e quando a gente rola ele vai lá para cima Olha que bonitinho ficou fofinho né fofinho demais né cara muito bem mas por que que deu esse rolo aqui e não gostei a gente tem que aprender uma propriedade que se chama z índex z índex Imagina que nós temos

aqui a profundidade então o amarelo que é o menu ele tá na profundidade um e por exemplo e o azul Ele está na profundidade zero por isso que quem está com maior profundidade Tá mais pra frente então é como se fosse o número da camada se a gente olhar isso aqui como uma coisa na frente da outra são camadas então o amarelo tá com um número de camada maior do que o azul então vou fazer o seguinte vou falar aqui o z index da nave é um e o z index do logo é do vamos

ver o que vai acontecer Olha que maravilhoso então nós temos Z index 2 tá mais à frente do Z index 1 do Amarelo então nós temos o position Stick e temos agora o nosso logo maravilhoso ali na posição fixa Eu particularmente no logo Faria não como fixo mas como absoluto bem Vamos inventar mais um pedaço aqui vamos fazer uma barra aqui embaixo fixa como eu falei que tem esse exemplo eu vou jogar aqui por exemplo um footer esse footer para nós vai ser uma barra lá embaixo eu vou jogar ele aqui ó a formatação dele

vou falar que ele vai ter cor de fundo laranja beleza vou falar que a altura dele vai ser a altura do menu show de bola e o posicionamento dele se eu fizer só isso aqui ó ele vai existir lá né Beleza então tá lá ele existe só que ele rola ó eu quero que ele fique fixo o tempo todo lá embaixo então vou falar que o position dele vai ser fixed beleza e eu vou falar que esse position vai ser Button zero ou seja a distância dele em relação à parte de baixo da tela vai

ser zero Button aqui embaixo left top right então eu consigo fazer aqui a magia acontecer com esse cara Opa eu falei Button 0 PX ele sumiu né Muito bom deixa eu fazer e left 0 PX para ver o que aconteceu com ele lá cadê meu footer certeza que foi lá para trás né cara esse vagabundo muito bem lá vamos nós então left zer e Button z0 eu falei que era sem apanhar do CSS olha eu aqui apanhando porque inventei ó devia ter inventado não né cara deixa eu meter um z índex nele aqui para ver

o que que tá acontecendo com ele ah quando eu boto fixo eu tenho que dar largura para ele deixa Deve ser isso deixa eu botar uma largura 100% não falei que ele é Flex isso mesmo quando a gente fala que é o posicionamento é fixo ou absoluto ele não tem largura por quê Porque ele não é relativo se então ele não é relativo em relação à página eu preciso dar uma largura para ele então olha só que legal nós temos aqui uma barra de menu embaixo temos o nosso menu ali em cima ó nossa barra

que pode ficar com o logo por exemplo menorzinho tal temos um logo aqui grandão que vai sumir se a gente rolar então nós temos aqui diferentes comportamentos no nosso cara aqui que que é importante Observe que quando eu botei o fixo aqui ó ele comeu um pedaço aqui então eu teria que fazer alguma coisa para esse esse texto que eu coloquei né esse parágrafo ele ter um espaço em relação à parte de baixo ó vou marcar vou colocar esse cara aqui como fim para você ver que o fim não AP aparece lá ó ó ele

não está aparecendo o fim tinha que tá escrito fim aqui e não tá como é que eu soluciono esse problema bem eu posso dizer o seguinte vou pegar esse cara esse parágrafo que eu chamei de parágrafo só né vai ficar horroroso isso aqui mas tá bom eu vou falar que ele vai ter um margem Button botar um margem Button de 60 pixels aqui ó olha quando eu rolei agora ele fez o fim por que margem but 60 pix porque é a altura do do footer né então eu coloquei esse cara F Ah eu quero at

um espacinho a mais entre 70 Tá bom vou botar ali 70 quando eu rolo Agora ele fica aquele espaço Ou seja a gente consegue que o usuário possa ver todo o conteúdo isso é muito importante tanto em web quanto em app Então agora você tá pronto para fazer qualquer layout HTML CSS