Ir ao conteúdo
  • Cadastre-se

Layers com HTML5 - Erro de posicionamento!


Chocco

Posts recomendados

Boa tarde, pessoal.

 

Estou com um problema no uso de layers (z-index), em uma estrutura html5. Acontece que o rodapé ignora a existência do elemento article e sobrepõe seu posicionamento.

 

Alguém poderia me ajudar? Agradeço desde já!

HTML    <body>        <div id="wrapper">            <header>asd </header>            <article class="index1">1  4</article>            <article class="index2">1   5</article>            <footer>footer</footer>       </div>       </body>

CSS

 

body { font-size: 62.5%;}#wrapper { max-width:1024px; height:800px; margin-top:2.0em; position:relative;}header { width:100%; height:105px; margin-top:2.0em; margin-bottom:5.5em;}article { width:100%;}.index1, .index2 { position:absolute; height:400px; margin:0 auto; position:absolute;}.index1 { z-index:1; }.index2 { z-index:2; }footer { width:100%;}

 

Agradeço qqr ajuda que obtiver.

Link para o comentário
Compartilhar em outros sites

  • Moderador

@Chocco

 

Recomendo sempre que quando for criar um layout, use cores para diferenciar os limites de cada elemento.. pois permite polir  para ficar do jeito que você quer.

 

Basicamente o erro está nesta linha: 

.index1, .index2 { position:absolute; height:400px; margin:0 auto; position:absolute;}

E não é só isso.. algumas coisas precisam ser mudadas como por exemplo acrescentar a posição absoluta no rodapé e  setar o bottom para zero

 

veja o seu exemplo no JSFiddle: http://jsfiddle.net/wk9p6bxo/1/

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Grande @dif!

 

Tua solução está perfeita... Porém, com esta solução acabo fixando o footer na parte inferior da tela... Eu precisava dela colada no final do article. 

Para isso, ao invés de deixar footer -> bottom:0; Usei bottom:160; 

 

Pergunto: Tu acha que terei problemas com outros tamanho de tela, uma vez que se trata de um layout responsivo?

 

Agradeço muito seu tempo e atenção.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...