botões das midias não obedecem regra css

e ai pessoal...

tenho aqueles botões do Facebook, twitter e google+ no site que estou desenvolvendo, mas um deles acho que o do facebook, quando clico para curtir a janelinha que se abre fica por traz do video que carrega ao lado, e o mesmo botão não deixa um outro link que tenho próximo a ele ser clicado...

já usei o z-index mas não obtive sucesso...

alguem pode me ajudar?

esse é o CSS

<style type="text/css">
#unico-video-aula {margin: 0 auto; width: 980px;}
#midias-sociais {float: left; margin: 0 20px 0 0;}
#midias-sociais li {background: #f4f4f4; border: 1px solid #999; margin: 10px 0; padding: 5px 5px 5px 4px; text-align: center; width: 60px;}
#dados-va {border-bottom: 1px solid #f4f4f4; border-top: 1px solid #f4f4f4; color: #666; float: right; font: bold 12px Arial; margin: 10px 0; width: 870px; z-index: 10;}
#dados-va li {list-style: outside url(imagens/marcador-dados-va.gif); float: left; margin: 10px 20px;}
#dados-va li a {color: #666; float: right; font: bold 12px Arial;}
#dados-va li a:hover {text-decoration: none;}
#resumo-va {float: right; width: 870px;}
#resumo-va p {color: #666; font: 14px Arial; line-height: 1.5em;}
</style>

esse é o html

<div id="unico-video-aula">
<ul id="dados-va">
	<li>
 <?php
 if (empty($unicoDados->site)) {
 echo $unicoDados->autor;
 } else {
 echo '<a href="'.$unicoDados->site.'" title="'.$unicoDados->site.'">'.$unicoDados->autor.'</a>';
 }
 ?>
	</li>
	<li><?php echo strftime('%a, %d de %b de %Y', strtotime($unicoDados->data_hora)); ?></li>
	<li>
 <?php
 if ($unicoDados->visitas == 0) {
 echo 'nunhuma visita!';
 } elseif ($unicoDados->visitas == 1) {
 echo '1 visita';
 } else {
 echo $unicoDados->visitas, ' visitas';
 }
 ?>
	</li>
	<li>15 comentários</li>
</ul>
<!--<ul id="midias-sociais">
	<li style="margin: 0;">
 <script type="text/javascript">(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>
 <div style="margin-left: 3px;" class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
	</li>
	<li>
 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.junioreberhardt.com.br" data-count="vertical" data-via="JRe DPTM" data-text="Aqui vem o texto a ser twitado" data-related="dataRelated" data-lang="en">Tweet</a>
 <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
	</li>
	<li>
 <script type="text/javascript">
 window.___gcfg = {lang: 'pt-BR'};
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/plusone.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
 </script>
 <div class="g-plusone" data-size="tall">Junior</div>
	</li>
</ul>-->

<iframe style="float: right;" width="870" height="540" src="http://www.youtube.com/embed/<?php echo $unicoDados->embed; ?>?rel=0&hd=1" frameborder="0" allowfullscreen>
</iframe>
<div id="resumo-va">
	<h1><?php echo $unicoDados->titulo; ?></h1>
	<p><?php echo $unicoDados->descricao; ?></p>
</div><!-- /resumo-va -->
</div><!-- /unico-video-aula -->