problemas com z-index css

EU TO TENTANDO FAZER UM LAYOUT MAS NÃO TO CONSEGUINDO. VEJA A IMAGEM ABAIXO:

A parte escura eu ja consegui o efeito.

Eu preciso que esta parte verde fique abaixo de tudo

A parte branca comece logo abaixo da verde 550px do topo exatamente.

Mas o efeito que eu quero é que a medida que use scroll a verde continue fixa a parte branca sobreponha a verde passando por cima ate atingir a parte negra e passar abaixo dela

Eu não sei se eu consigo isso em CSS ou se eu preciso de um jquery.

Eu to tentando no z-index mas não ta funcionando.
​por favor alguém analiza ai e me da uma luz.

NESSE LINK TEM O ARQUIVO CSS E HTML SE ALGUÉM ACHAR MELHOR BAIXAR:
http://www.4shared.com/rar/FPabkh8b/TESTE.html??

/applications/core/interface/imageproxy/imageproxy.php?img=http://i45.tinypic.com/4jw8c2.jpg&key=e9242be59954f9cffe2d1579d19001e13928afa15726a3ee34fc298895d48f5b" alt="4jw8c2.jpg" />

abaixo estão os códigos que usei:

css

>

@charset "utf-8";
/ CSS Document /

*{margin:0; padding:0;}

body {

font-family:Tahoma, Geneva, sans-serif;
}

#navbar {
width:100%;
height:70px !important;
background-color:#272426;
background-color:rgba(0, 0, 0, 0.9);
opacity:0.98;

-moz-opacity: 0.98

 filter:alpha(opacity=98);
position:fixed;
display:block;
top:0 !important;
left:0 !important;
z-index:1000000;
box-shadow:0px 1px 4px rgba(0, 0, 0, .4);
}

#navbar:hover {

color:#141414;
background-color:#141414;
}

#menu {
width:960px;
margin:auto;
}

#dcontainer {
width: 100% !important;
height: 480px;
background-color: #22B573;
position: fixed;
display: block;
top: 70px !important;
z-index: 1;
background: -webkit-gradient(radial, center center, 0, center, 460, from(#56E0A3), to(#22B573));
background: -webkit-radial-gradient(circle, #56E0A3, #22B573);
background: -moz-radial-gradient(circle, #56E0A3, #22B573);
background: -ms-radial-gradient(circle, #56E0A3, #22B573);

}

#ccontainer {
width: 100%;
background-color: white;
top: 550;
z-index: 50;

}

#conteudo {
width: 960px !important;
height: auto;
margin: auto;
background-color: white;
top:550px;
top:550px;
}