<Section> {position: absolute} e a próxima div???

28/04/2022

0

Boa noite devs!

Estou com um desafio que a dias tem me tirado sono e não consigo resolver.
Cenário:
Tenho um layout composto por,
- <header> menu (navbar, com positon aboslute para ficar sobre o carousel);
- <home> carousel de fotos (slide), também com position absolute;
- aqui começa a <main>
- <section xxxx> que está com position absolute devido ao layout que tem um pequeno formado de onda dessa seção que deve começar sobrepondo um pouco o carousel da seção home anterior, então dei position absolute com margem top negativa para fazer essa sobreposição.

<section yyyy> aqui começou meu pesadelo, qualquer seção que eu começar daqui ta ficando por baixo dessa última seção acima e lá em cima no início da anterior, como se a anterior não existisse, me custou descobrir por causa do z-index da anterior (tive que inspecionar elementos para descobrir). Já fiz de tudo, position relative, absolute e etc. Essa terceira section está começando uma seção nova, fora da última que estava com posição absoluta, eu não sei mais o que fazer, a única solução que consegui foi continuar todo o site dentro da última seção com position absolute.

Estou desesperado, são os limites que a gente encontra quando viaja demais no layout, mas é algo tão simples, eu acredito que deve existir algo que me permita ter uma seção anterior com position aboslute e a próxima continuar depois do final da anterior.

Desculpem se a dúvida é banal, mas é que sou novo demais nessa área e já estou a dias quebrando cabeça.

Agradeço imensamente se alguém puder me ajudar.

Obrigado!
Cristian Kons

Cristian Kons

Responder

Posts

05/06/2022

Edson Marcolongo

Boa noite devs!

Estou com um desafio que a dias tem me tirado sono e não consigo resolver.
Cenário:
Tenho um layout composto por,
- <header> menu (navbar, com positon aboslute para ficar sobre o carousel);
- <home> carousel de fotos (slide), também com position absolute;
- aqui começa a <main>
- <section xxxx> que está com position absolute devido ao layout que tem um pequeno formado de onda dessa seção que deve começar sobrepondo um pouco o carousel da seção home anterior, então dei position absolute com margem top negativa para fazer essa sobreposição.

<section yyyy> aqui começou meu pesadelo, qualquer seção que eu começar daqui ta ficando por baixo dessa última seção acima e lá em cima no início da anterior, como se a anterior não existisse, me custou descobrir por causa do z-index da anterior (tive que inspecionar elementos para descobrir). Já fiz de tudo, position relative, absolute e etc. Essa terceira section está começando uma seção nova, fora da última que estava com posição absoluta, eu não sei mais o que fazer, a única solução que consegui foi continuar todo o site dentro da última seção com position absolute.

Estou desesperado, são os limites que a gente encontra quando viaja demais no layout, mas é algo tão simples, eu acredito que deve existir algo que me permita ter uma seção anterior com position aboslute e a próxima continuar depois do final da anterior.

Desculpem se a dúvida é banal, mas é que sou novo demais nessa área e já estou a dias quebrando cabeça.

Agradeço imensamente se alguém puder me ajudar.

Obrigado!


Olá!

Não ficou muito claro pra mim o que está acontecendo exatamente.

Sempre que você usa o position: absolute; o elemento em questão sai do flow normal do site, e é ai que entra o z-index, pois os elementos começam a se sobrepor.
Pelo que você escreveu, ao utilizar position.absolute na ultima section, ela quem deveria vir para frente, pois o z-index dela seria o maior, automaticamente definido pelo CSS, uma vez que é o último elemento escrito no HTML.

De qualquer forma, seria interessante você mandar o código que você está utilizando para que fique mais claro o problema. Mande apenas as tags e o CSS, não precisa dos textos originais pois isso é indiferente.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar