Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Blog está sobrepondo header

Fala professor. Beleza?

Então... Coloquei meu header "position:fixed", pois era o resultado que eu esperava e quando coloco o meu blog "position:relative" ele passa a sobrepor o header quando rolo o scroll. Sabe me dizer o que devo fazer para ajustar?

Obrigado!

5 respostas

Oi Esequiel, tudo bem? Puxa, pra poder te ajudar direitinho eu precisaria ver o código, pra ter certeza mesmo, você consegue me disponibilizar? Pode ser um zip no dropbox ou google drive se não tiver familiaridade com o github

Claro... Segue projetinho no git: https://github.com/esequielvirtuoso/temp_front_end_course

Valeu!

Alguém?

solução!

Resolvi.

Causa: O "position : fixed" acaba sendo relativo ao view-port e seu "z-index" por padrão é menor do que o z-index do "position: absolute" que é relativo ao seu acestral mais próximo.

Assim, setei o z-index do meu elemento fixed para 10 e o z-index do meu elemento de conteúdo "main class="content"" para 1;

Assim, funcionou perfeitamente.

.content{
    position: relative;
    z-index: 1;
}

.main-title{
    font-family: 'Oxygen';
    font-size: 140%;
    width: 100%;
    padding: 2em;
    background-color: #3d3d3d;
    font-weight: bold;
    color: #fffa65;
    position: fixed;
    top:0;
    overflow: hidden; 
    z-index: 10;
}

footer {
    padding: 0.8rem;
    clear: both;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: #fff;
    background-color: #4b4b4b;
    font-family: 'Source Sans Pro', sans-serif;
    z-index: 10;
}

Puxa Esequiel, mil desculpas por ter demorado tanto. Fico feliz que tenha encontrado a solução e compartilhado aqui. Essa semana foi bem difícil pra mim acompanhar aqui o fórum, mas logo mais voltaremos ao normal.

Mais uma vez, desculpa e sucesso pra você! Abraço e bons estudos!