Problema para sobrepor div

Tenho a seguinte estrutura:

<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

<!-- #icons -->

<div id="icons">
<a href="#" title="Facebook"><span class="icon-facebook"><h4 class="icons">Facebook</h4></span></a>
<a href="#" title="Twitter"><span class="icon-twitter"><h4 class="icons">Facebook</h4></span></a>
<a href="/contato/" title="Contato"><span class="icon-envelop"><h4 class="icons">Facebook</h4></span></a>
<a href="/links/" title="Links"><span class="icon-link"><h4 class="icons">Facebook</h4></span></a>
<a href="/mapa-do-site/" title="Mapa do Site"><span class="icon-earth"><h4 class="icons">Facebook</h4></span></a>
</div>

<!-- end #icons -->

Eu quero sobrepor a div#icons mas mesmo que eu de z-index 999 para ela e um menor para a div#site-navigation .main-navigation ela até sobrepõe, mas os links deixam de funcionar. Há alguma coisa de errado com o CSS abaixo?

#icons {float:right; letter-spacing:5px; margin-right:5px; z-index:999; margin-top:-30px;}