[Resolvido] Sobreposição de objetos

Prezado/a

Sou iniciante em css e estou desenvolvendo um site para um trabalho da faculdade. Logo na index deparei com um grande problema.

Tenho um box no centro da página e por questões de design ele deve ser transparente para que o background entre em contraste com o mesmo. Possicionei esse box no centro da página com posição absoluta.

Agora vem meu problema;

Todo o conteúdo do site será carrregado e exibido neste box, porém os outros elementos como imagens e texto estão possicionados atráz do box.

Como faço para que os elementos fiquem na frente do box e possicionar corretamento dentro do box?

Segue abaixo minha URL

http://www.escolhac.com.br/

Abaixo meu estilo.

body {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; margin:0; padding:0; background:url(imagens/fundo.jpg);}

/** BOX MEIO **/

#meio {background:url(imagens/meio_conteudo.png) no-repeat; width:820px; height:520px; margin:0; padding:0; position:absolute; left:50%; top:50%; margin-left:-410px; margin-top:-264px;}

/** LOGO e MENU **/

#logomarca span {display:none;}
#logomarca h1 {background:url(imagens/logo.png) no-repeat; width:290px; height:111px; margin:0; padding:0; position:relative; clear:both; left:300px; top:300px;}
#menu {width:600px; top:200px; left:750px;}
#menu ul {margin:0; padding:0;}
#menu li {float:left; margin-right:7px; list-style:none;}
#menu li a {text-decoration:none; padding:5px 10px;}
#menu li a img {border:none;}

/** BARRA **/

#barra {clear:none; border-top:3px solid #FFF; width:750px; padding:0; margin:0; margin-left:350px; margin-top:20px;}

/** MENU INFERIOR **/

#menu-inferior {margin-right:320px; margin-top:8px;}
#menu-inferior li a img {border:none;}
#menu-inferior ul {margin:0; padding:0;}
#menu-inferior li {float:right; margin-right:7px; list-style:none;}
#menu-inferior li a {text-decoration:none; padding:5px 10px;}Alguém pode me ajudar?