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

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> 

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.