Ciao a tutti Vi posto innanzitutto il css e html

Css.
#head {
width: 968px;
height: 150px;
margin: 0 auto;
padding: 0;
background-color:red;
}

#body {
width: 968px;
height: 600px;
margin: 0 auto;
padding: 0;
background-color:green;
}

#foot {
width: 968px;
height: 100px;
margin: 0 auto;
padding: 0;
background-color:blue;
}

#contein {
width: 500px;
height: 800px;
margin: 0 auto;
padding: 0;
background-color:white;
z-index: 34;
}

HTML..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>3P S.r.l servizi e soluzioni IT</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id="head">
</div>

<div id="body">
<div id="contein">

</div>
</div>

<div id="foot">
</div>

</body>
</html>

Cio che vorrei fare è che il div bianco ovvero conteiner sovrasti per un pezzettino il conteiner rosso e il conteiner verde rispettivamente head e footer... leggendo nei vari post ho provato con lo z-index che sembrava fare al caso mio pero o sbaglio qualcosa in quello oppure nn è cio che devo usare... come posso fare???? grazie a tutti