Problemas com menu

[duzagatto]

Olá, no meu site centrotech.net tem um menu feito em HTML e CSS, e ao rolar a página pra baixo, o menu permanece fixo no topo da página com um código jQuery que adiciona uma classe com o parâmetro position:fixed para que ele possa se manter fixo no topo, porém, se na página possui algum elemento com position absolute, ele é sobreposto, ou seja, o menu fica atrás desse objeto, como é no caso das propagandas, a publicidade do adsense sobrepõe o menu, gostaria de saber como resolver esse problema.

 

CSS do Menu:

#menuExterno{	width:100%;	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0851aa+0,022c8e+100 */	background: rgb(8,81,170); /* Old browsers */	background: -moz-linear-gradient(top,  rgba(8,81,170,1) 0%, rgba(2,44,142,1) 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(8,81,170,1)), color-stop(100%,rgba(2,44,142,1))); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top,  rgba(8,81,170,1) 0%,rgba(2,44,142,1) 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top,  rgba(8,81,170,1) 0%,rgba(2,44,142,1) 100%); /* Opera 11.10+ */	background: -ms-linear-gradient(top,  rgba(8,81,170,1) 0%,rgba(2,44,142,1) 100%); /* IE10+ */	background: linear-gradient(to bottom,  rgba(8,81,170,1) 0%,rgba(2,44,142,1) 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0851aa', endColorstr='#022c8e',GradientType=0 ); /* IE6-9 */}#menu {	width:1000px;     height:42px;     margin:0 auto;}#menu ul {     list-style-type: none;}#menu ul li{    float:left;    position: relative;    -webkit-transition: all 0.4s ease;    -moz-transition: all 0.4s ease;    -o-transition: all 0.4s ease;    transition-delay:0.1s;    -moz-opacity: 1;    opacity: 1;    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);}#menu ul li a{    font: 10px/32px "Cabin Condensed", Arial, Helvetica, sans-serif;    padding:5px 19px;    text-decoration:none;    color:#FFF;    display:block;}#menu ul li:hover{    background:#09C;    -moz-opacity: 1;    opacity: 1;    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);}.fixar{    position:fixed;    top:0;    left:0;}

Código do jQuery (Esse código faz com que seja adicionado aquela classe fixar quando o usuário descer a barra de rolagem):

			$(window).load(function(){			var offset = $('#menuExterno').offset().top;			var $menuExterno = $('#menuExterno');			$(document).on('scroll', function () {			    if (offset <= $(window).scrollTop()) {			        $menuExterno.addClass('fixar');			    } else {			        $menuExterno.removeClass('fixar');			    }			});						});//]]>  

Alguém tem alguma dica de como fazer com que o menu sobreponha qualquer item dá página?

 

EDIT

 

Bom, 20 minutos após eu criar esse tópico me lembrei da propriedade z-index, e utilizando a mesma consegui corrigir o problema, peço que algum moderador feche o tópico já que consegui corrigir o problema, sem a necessidade de exclusão, pois algum membro pode ter a mesma dúvida.

[DiF]

@duzagatto

 

Exatamente,  nesse caso o z-index é o mais indicado para manipular o eixo Z.

Mas lembe-se de que ele só funciona se os elementos forem irmão adjacentes ou estiverem dentro de elementos diferentes

 

Exemplo de certo e errado:

<!-- certo: --><div class="um"></div><div class="dois"></div><!-- errado: --><div class="um">   <div class="dois"></div></div> 

Isto porque o z-index não é herdado do elemento pai.

 

Obrigado por retornar que conseguiu resolver e apontou a solução.

O tópico foi encerrado.