Banner Flutuante fechar ao passar mouse em cima

Ola amigos.

gostaria de pedir ajuda na configuração de um banner flutuante.

Bom meu projeto é o seguinte:

- O banner flutuante que feche ao passar o mouse em cima do X

- Desenvolve o codigo, porem na hora de adicionar o mesmo no blogger ou wordpress ele acaba ficando atras dos textos.

Alguém sabe informar o que poderia ser?

Segue o código:

<meta charset="UTF-8">
<script type="text/javascript">
function passar(valor){
	document.getElementById("fechar").style.display = "none";
}
</script>
<style type="text/css">

#banner{
 position:absolute;
 top:100px;
 left:500px;
 float:right;
}
#fechar p{
 position:absolute;
 top:2px;
 left:-450px;
 float:right;
}
</style>
<div id="conteudo">
   <div id="banner">
      <div id="fechar"><a href="#" title="Fechar" class="fechar" align="right"  onMouseOver="passar();">X</a>
      <p class="link"><a href="#" ><img src="http://oi61.tinypic.com/2z730ae.jpg" ></a></p>

   </div>
</div>
</div>

Já testei outros banner que fecha quando clica no X funciona perfeitamente, porem nesse caso eu preciso do banner que fecha ao passar o mouse em cima.

Peço ajuda, pois acredito que essa postagem também seja útil para outras pessoas.

Acho que falta alguma coisa para o banner ficar em cima do site e nao atras dos textos.