I'm making a fixed footer while scrolling the screen.
But I put z-index: -1
to stay under all my content.
When I do this it overrides the footer LINKs.
But if I put z-index:0
it gets over some elements of the page.
And even though I put z-index:1
in the elements of the page, it does not work in my case, because the elements are transparent background because of the background image of body
. That's why the footer pops up from behind.
How do I fix this problem?
Follow the code:
#all{
margin-bottom: 120px;
}
ul{
border-bottom: 1px solid #ccc;
}
ul li{
display: inline-block;
padding: 10px
}
section{
background: #ccc;
padding: 20px 10px;
z-index: 1;
}
.footer-contato{
background: #f1f1f1;
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
z-index: -1;
}
<header>
<nav>
<ul>
<li>home</li>
<li>informações</li>
<li>localização</li>
<li>patrocinadores</li>
</ul>
</nav>
</header>
<div id="all">
<section class="home">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="informacoes">
<h1>Informações</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="footer-contato">
<h1> Footer fixed </h1>
</section>
<section class="local">
<h1>Local</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="patrocinadores">
<h1>Patrocinadores</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>