Show Div on top..its not working in Chrome browser

Question

I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,

What else should I do to make it topmost element

<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; "> 
    <div class="container">
     <div class="footer-nav"> 
        <ul> 
           <li><a href="/team/">Team</a></li> 
        </ul> 
        <ul> 
          <li>Jobs</li> 
        </ul> 
        <ul> 
          <li><Twitter></li> 
        </ul> 
      </div> 
       
      <hr> 
     </div> 
 </div>

Are you making sure to set the z-index on other containers that come after/before this and compete for order? You have to set the z-index on all containers which compete for layer order. — Candide
have you tried sending back the element that covers your footer? for ex the container is over footer, set container's z-index to -1. — rmagnum2002
yes, every other element is having a z-index, I just added !important to z-index and it seems to be working on Chrome now — Sandhurst
you want the footer on top? but this way you'll hide the container with links. or it's another element that's stays on top? — rmagnum2002

rmagnum2002 rmagnum2002 · Accepted Answer · 2011-10-11T16:11:38

http://jsfiddle.net/A5jcT/2/

<div id="footer">
    <div class="container">
     <div class="footer-nav">
        <ul>
           <li><a href="/team/">Team</a></li>
        </ul>
        <ul>
          <li>Jobs</li>
        </ul>
        <ul>
          <li><Twitter></li>
        </ul>
      </div>

      <hr>
     </div>
 </div>

#footer
{
    border:1px solid blue; z-index: 9999;width: 100%; 
    height: 65px;position: ; bottom: 0px;
}
.container
{
     border:1px solid red;position:relative;z-index: -10
}

.footer-nav
{
     border:1px solid green;position:relative;z-index: -20
}

it looks like you have to make other elements also positioned. Now you have the footer on top.

Show Div on top..its not working in Chrome browser

1 Answers