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.