Footer Fixed - Z Index

Question

Footer Fixed - Z Index

Navigation

#1 by (4 votes)

-4

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>

css

asked by anonymous 06.10.2015 / 19:05

1 answer

Put quotation marks at the beginning and end of each number Static methods X Non-static methods for data access layer

score 4 · Accepted Answer

Now let's see if we understand one thing:

The z-index property determines the " stacking level " of an HTML element. The "stacking level" - Refers to the position of the element on the Z axis (as opposed to the X axis or the Y axis). A positive% value of% greater than > z-index , means that the element will be closer to the top, in the stacking order, already a 0 negative value less than < z-index , will mean the opposite.
This stacking order occurs perpendicular to the screen (or viewport).

Sowhat'sgoingonhere?

Whenyougiveanegative%colortofooter,itwillstayloweratthestackinglevel,sowhenitisbelowtherestoftheotherelementsatthestackinglevel,itwillbecomeimpossibletoclick(sincetheseelementsareworkingasalayerabovethefooter).

Summarizing

Oryouputthefooterunderneaththecontentbymakingitnon-clickable/visible,orplaceitoverthecontenttomakeitclickable.Thereisnomiddlegroundwhereyoucanputthefooterbelowthecontentbyassigninga0andthenbringthelinksbackuptothecontentgivingaz-indexonlyforthelinks,sincethe.footer-contato{z-index:-1;}nowappliedtotheelementswithinthefooter,willrespecttheorderofthez-indexoftheclass-z-indexandnotthedocumentstackingorder,sincethisisitsz-index,inwhichyoualreadygave.footer-contatopreviously,orderingittostaybelowthestackinglevel.

Therecommendedherewouldbetobringthefootertothetopofthecontent,assigningitadivparent(orhigher)thatwillresultasfollows:

#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: 0;
}

<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>
        <a href="#">link</a>
    </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>