Member Avatar for powersstuff
powersstuff 0 Newbie Poster

Wracking my brain! I've got a fixed footer nav bar and want it to be tucked behind a small logo image on each end. I've edited the CSS so many times that I can't remember what I started with, but the problem seems to be z-index related. If container is set a -1 then the links do not work, but if the navbar is z-index higher then it covers the images. Please suggest best way to get navbar on top, with its container beneath, and bookend images. Thanks for help.

This is how I want it to look, but need to get the links working:

<div id="fixedfoot_container">
 <div id="fixedfoot_content">
    <div id="fxfootL"><img src="Images/ship2.png" alt="Cruise Ship CLIPA" height="100" /></div>
     <div id="fxfootR"><img src="Images/CLIPA_Logo_100.png" alt="CLIPA Logo" /></div>
     <div id="fxfootC">
<div id="navff">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Membership</a></li>
        <li><a href="#">Club Events</a></li>
        <li><a href="#">Message Board</a></li>
    <li><a href="#">Cruise Reviews</a></li>
        <li>
            <a href="#">Marketplace</a>
                <ul>
                      <li><a href="#">Clothing</a></li>
                      <li><a href="#">etc</a></li>
                      <li><a href="#">etc</a></li>
                      <li><a href="#">etc</a></li>
                </ul>
        </li>
          <li><a href="#">What to Expect</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Advertise With Us</a></li>
      <li><a href="#">Contact Us</a></li>
        </ul>
     </div>
    </div></div>
  </div>

CSS:

#fixedfoot_container{
    position:fixed;
    bottom:0px;
    top:auto;
    z-index:10;
    width: 100%;
    float: left;
}
#fixedfoot_content {
    width: 95%;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    z-index: 7;
}
#fxfootL {
    float: left;
    height: auto;
    width: auto;
    z-index: 5;
}
#fxfootR {
    height: auto;
    width: auto;
    float: right;
    z-index: 5;
}
#fxfootC {
    height: auto;
    width: 85%;
    float: left;
    margin: 0px auto 0px 91px;
    position: absolute;
    bottom: 0px;
    background: #102F8C;
    left: 4px;
    font-weight: bold;
    color: #FFF;
    z-index: -1;
    padding-right: 20px;
    padding-left: 20px;
}
#navff{
    width: 92%;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    font: 0.8em;
    color: #F0F;
    background: #102F8C;
    padding-right: 20px;
    padding-left: 20px;
    position: absolute;
    bottom: 0px;
    left: 1px;
    z-index: 2;
}
#navff ul
{   margin: 0px; padding: 0px;}
#navff ul li
{
    display:inline;
    height:20px;
    float:left;
    list-style:none;
    margin-left: 1px;
    position: relative;
}
#navff li a
{
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    padding: 2px 10px 3px 15px;
}
#navff li a:hover
{background: #C00; }
#navff li ul
{
    margin:0px;
    padding:0px;
    display:none;
    position: absolute;
    left: 0px;
    background: #102F8C;
    bottom: 21px;
}
#navff li:hover ul
{display:block;
width:175px;
}
#navff li li
{list-style:none;
display:list-item;
}
#navff li li a
{color:#fff; text-decoration:none;}
#navff li li a:hover
{
    text-decoration:none;
    background: #C00;
}
Edited by mike_2000_17 because: Fixed formatting
  • 1 Contributor
  • 0 Replies
  • 113 Views

Dani AI

Generated

— the symptom you describe is a classic stacking‑context/z‑index trap: a positioned parent with a negative z-index drags its whole stacking context (and all children) behind siblings, so raising a child’s z-index won’t let it escape. That explains why links become non‑clickable when the container is pushed “below” the page, and why lifting the nav covers the logos when you try to fix it directly. See MDN on stacking contexts for the rules: Understanding z‑index.

Practical fixes (pick one that fits your layout):

  • Remove the negative z-index on the center container. Use separate layers instead: a background bar (lowest z), the nav (above the background), and the logos (above the nav if they must visually overlap). Make the logos positioned elements so their z-index actually applies. A minimal pattern:

    /* conceptual only — adapt names/values */
.footer { position: fixed; bottom:0; z-index:100; }
.footer-bg { position:absolute; z-index:0; }
.footer-nav { position:relative; z-index:10; }
.logo { position:absolute; z-index:20; /* optional pointer-events: none */ }

  • If the logos are purely decorative and overlap clickable links, consider pointer-events: none on the overlapping parts so clicks pass through (note older IE lacks support). MDN: pointer-events.

Troubleshooting tips: use your browser inspector to watch computed z-index and stacking contexts, temporarily add contrasting outlines/backgrounds to see which element sits on top, and toggle pointer-events live to confirm click behavior. For a short deep dive on z-index quirks, see the CSS‑Tricks guide: z-index explained.

Recommendation: avoid negative stacking for the center bar, make nav a sibling (not trapped inside a negatively stacked parent), and position/assign z-indices to the three layers (bg, nav, logos). This keeps links clickable and preserves the visual “bookend” overlap.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.