<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!
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
Curtir tópico
+ 0
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!
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
Clique aqui para fazer login e interagir na Comunidade :)