Trazer Objetos à frente com CSS - dúvida

Olá, tudo bem? estou montando um sistema de destaque para colocar no meu site de música eletrônica...
Está praticamente pronto...
o Problema é o seguinte..
O sistema exibe as imagens alternadamente, sem precisar dar refresh na pagina.. blz
também exibirá algums botoes, como um para voltar, botões com a numeraçao de imagens e um para passar...
O problema eh ke nao consigo posicionar estes botoes acima das imagens, ou seja, as imagens ficam por cima dos botões, e dai nao da pra clicar neles..
no site onde "aprendi" a fazer nao informa como solucionar este erro, ate porque la os botes ficam ao lado da imagen, e nao acima delas..
A minha ideia eh mais ou menos a deste site :
[url]http://www.unoescjba.edu.br[/url]

a baixo segue o codigo com ke estou tendo problemas...

&lt;style&gt;
* { margin:0; padding:0;}
#destaques { width:500px; height:200px; border:1px solid black;    overflow: hidden;}
#destaques ul { height:30px; list-style:none; text-align:center; float:right;}
#destaques ul li{ position:relative; top:173px; left:-367px; float:left; width:20px; height:20px; border:1px solid gray; margin:2px; cursor:pointer; background-image:url("list.png"); font-family:Arial; color:#666666; font-weight:bold;} /*opção que configura os botões do sistema*/
#destaques ul li:hover{
color:white;
}
#destaques div { clear:both; height:170px; display:none; /* todas escondidas por default. O JS que irá exibi-las. */}
#destaques div img { float:left; width: 500px; height:200px; border:0px solid black; margin:0px; position:relative; top:-40px;}
#destaques .exibe { display:block;}
&lt;/style&gt;
&lt;script&gt;
var atual=1; //esta var guarda o valor que tá sendo exibido agora.
var timeloop; //guardará o setInterval

function muda(qual){
    /*** função que altera a div que é exibida ***/
    //divs que estão dentro do destaques colocadas num array
    var divs = document.getElementById(&quot;destaques&quot;).getElementsByTagName(&quot;div&quot;);
    //formatando o qual
    var qual_num = Number(qual);
    if (qual_num&lt;1){ qual_num = divs.length;}
    else if (qual_num&gt;divs.length) { qual_num = 1;}
    //colocando o zero antes se for necessário
    if (qual_num&lt;10) {qual = &quot;0&quot; + qual_num} else { qual = qual_num };
    //voltando a classe de todas para o padrão que é vazio (resetando)
    for (var i=0;i&lt;divs.length;i++){ divs[ i ].className = "";}
    //aplicando a classe exibe na que for pra exibir
    document.getElementById("dest_"+qual).className = "exibe";
    atual = qual_num; //setando o atual
}

function iniciaAutomatico(){
    timeloop = setInterval("muda(Number(atual)+1)",3000);
}

&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="iniciaAutomatico()"&gt;

&lt;div id="destaques"&gt;
  <ul>
    <li >«</li>
    <li >1</li>
    <li >2</li>
    <li >3</li>
    <li >»</li>
  </ul>
  &lt;div id="dest_01" class="exibe"&gt;
      <img src="http://192.168.1.3/PHP/Site/NArena/destaques/twitterarena.png" />
  &lt;/div&gt;
  &lt;div id="dest_02"&gt;
      <img src="http://192.168.1.3/PHP/Site/NArena/destaques/imagem13.png" />
  &lt;/div&gt;
  &lt;div id="dest_03"&gt;
      <img src="http://192.168.1.3/PHP/Site/NArena/destaques/imagem7.png" />
  &lt;/div&gt;
&lt;/div&gt;

Se alguem puder me ajudar eu agradeço.. mas tipo, ja vi muitas pessoas fala... ahh vc tem ke coloca o position tall..../ tipo, se possivel, me informe em que linha arrumar isso e qual seria a sintaxe correta do codigo para ke funcione...

desde ja agradeço

fuiii

2 Respostas

Topicos relacionados