border отображается поверх элемента с большим z-index

[alex4321]

<div id="block-block-1" class="block block-block">
<h2>На правах рекламы</h2>
<div class="content">
<!-- Меню футера -->
<div id="footer-menu" style="z-index:20">
  <a href="http://nikrock.org.ua" class="first" style="z-index:30">Главная</a>
  <a href="http://nikrock.org.ua/faq">FAQ</a>
  <a href="http://nikrock.org.ua/groups" class="last">Группы</a>
</div>
<!-- Контент футера (переносится из генерируемого views блока, здесь указывать без толку) -->
<div id="footer-content">
</div>
</div>
<!--Баннеры-->
<div id="banners-container"><div class="banners">
Здесь будут баннеры
</div></div>
</div>
</div>
</div>

Применена CSS такого вида :

    #footer_container
    {
      vertical-align: center;
      z-index: 10 !important;
    }

        #footer-menu a
        {
          background-image: url('../images/bottom-menu.gif');
          background-color: #000000 !important;
          color:#ffffff !important; 
          margin: -2.5px;
          padding:5px;
          text-decoration: none;
          height: 28px;
          z-index: 20 !important;
        }

        #footer-content
        {
          position: relative;
          left:0px;
          top:-10px;
          border:2.5px solid #514F50;
          border-radius: 10px;
          padding:5px !important;
          z-index: 10 !important;
        }

При этом граница footer-content отображается поверх ссылок footer-menu (хотя z-index footer-content-а меньше)

Chrome в Computed style показывает для ссылок footer-menu z-index:auto. При попытке прописать z-index вручную в style - также.

Как можно добиться перекрытия ссылками границы? (вот ссылка на страницу)

[Naive]

z-index не работает для статично-спозиционированных элементов (#footer-menu a, #footer_container), а для относительно-.. работает (#footer-content), поэтому он выше...

[alex4321]

Т.е. ситуацию должен спасти костыль в виде

position:relative;
left:0px;
top:0px;

?

upd. Проверил, работает