Div Relativo em Cima de Outros

Olá Pessoal, minha dúvida é um pouco complicada de entender, vou tentar ser bem claro...

Eu tenho um DIV que abriga outros três vejam o HTML

<div id='todos'>
 <div id='cabecalho'></div>
 <div id='corpo'></div>
 <div id='rodape'></div>
</div>O div todos não tem tamanho, ele deve variar conforme os divs no seu interior crescem. 

Quando o usuário clica em um botão eu preciso criar um outro div que ocupe todo o div todos para que assim eu possa desabilitar os três divs no seu interior.

Isso eu consegui com o width e height 100%, porém o div fica abaixo dos três, então não cobre nada... eu preciso que fica acima.

Coloquei o z-index também e não deu certo...

Como eu posso fazer isso

Agradeço a ajuda