-4
I’m making a fixed footer while scrolling on the screen.
But I put z-index: -1 to be under all my contents.
When I do this it overrides the Footer Links.
But if I put z-index:0 it sits over some elements of the page.
And even if I do z-index:1 in the page elements, does not work in my case, because the elements are with transparent background because of the background image of the body. Hence because of this the footer keeps appearing from behind.
How do I fix this problem ?
Follows 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>
Good afternoon Deesouza, could you set an example that can be reproduced? In this case, there may be other elements or how html markup and other css rules have been made that affect.
– Guilherme Nascimento
Check out this LINK: http://jsfiddle.net/ckvda5L3/ - I know how to use the technique, but it’s a problem when you have LINK. My structure is the same as this one. I used this LINK to help a user.
– Diego Souza
Good afternoon Deesouza, have to publish the page so I inspect the elements?
– Luiz Filipe
No way. It’s on my localhost.
– Diego Souza
Good afternoon, it was not me, but I believe that the reason is that it is not very clear how the two specified problems occur, I do not think deserves negative for this, has question much more difficult to understand. I think it’s just getting better. Unfortunately it’s having patience Dee.
– Guilherme Nascimento
There is no way to reproduce the problem. I do everything in Laravel, it’s Blade. There is no way to slice the code and put some things here. I keep hoping that others will understand the structure and the problem.
– Diego Souza
Deesouza has to take the page generated in the browser and click Ctrl+U on the keyboard and analyze the source code (I believe that the CSS is automatically minified by Aravel, if it is the 5). So you could have more accuracy. Another idea, it’s not very good and very difficult to reproduce, but could post two pictures (of both problems)?
– Guilherme Nascimento
Why did my question receive so many negative votes ?
– Diego Souza