Development CSS Z-Index Question

Hi im having a problem with z-index on a page that im working with. Ill post the css and the html then digress into the actually problem.

/*
Chris Horlick
Style Sheet Thingie
*/

body{
text-align:center;
background-color:#CBC2B9;

}

.pageContainer{
width:1024px;
hieght:768;
text-align:left;
background-color:#CBC2B9;


}

.NewsInBrief{

background-color:#CBC2B9;

}


.MenuBar{
width:100%;
height:25px;
vertical-align:middle;
background-color:#624327;
padding:0px;
margin:0px;
border:0px;
text-align:center;
line-width:1;
border-top:5px outset #624327;

}

.MenuBar ul{
vertical-align:middle;
font:bold 16pt sans-serif;
padding:0px;
margin:0px;
border:0px;
background-color:#624327;


}

.MenuBar li{

display:inline;
list-style:none;
padding:0px;
margin:0px;
border:0px;
background-color:#624327;

}

.Menubar li a{

background-color:#624327;
color:#E5E5E5;
padding:0px;
margin:0px;
border:0px;
text-decoration:none;
}

.Menubar li a:hover{
background-color:#48311d;
padding:0px;
margin:0px;
border:0px;
text-decoration:none;
}

.Post{
width:100%;
height:125px;
margin-bottom:10px;
float:right;
color:#FFFFFF;
border: 1px outset #FFFFFF;
z-index:100;

}

.ColContainer{
width:100%;
height:100%;
background-color:#CBC2B9;

}

.ColContainer a{
text-decoration:none;
width:100%;
height:100%;
}


.ContCol_background{
background-color:#98A000;
width:500px;
height:100%;
position:absolute;
left:385px;
z-index:0;

}

.ContCol_text{
background:transparent;
background-color:transparent;
width:500px;
height:100%;
font-size:10pt;
z-index:100;

}

.PatCol{
width:250px;
height:100%;
background-color:#97530A;
color:#FFFFFF;
position:relative;
float:left;
text-align:right;
z-index:50;

}


.PatColControl{
z-index:50;
width:100%;
margin-top:00px;
background-color:#000000;
color:#FFFFFF;
vertical-align:baseline;

}

.UjCol{
width:250px;
height:100%;
background-color:#4B531A;
color:#FFFFFF;
position:relative;
float:right;
text-align:left;
z-index:50;
}

.UjColControl{
z-index:50;
width:100%;
margin-top:00px;
background-color:#000000;
color:#FFFFFF;
vertical-align:baseline;

}

<div class = "ColContainer">
<div class = "PatCol" id = "PatCol" style="width:200px">
<div class = "PatColControl">
<input type = "text"> <a onClick = "menuEventPat();">+&nbsp;</a>
</div>
</div>
<div class = "ContCol_background">
<div class="ContCol_text" >
<div class = "Post" id = "PatrickPost">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam at elit nec ligula sodales malesuada. Sed eget nunc ac turpis rutrum dictum. Integer dignissim, orci eget pulvinar accumsan, ligula est malesuada sem, eget pretium augue risus sed arcu. Duis eros. Etiam et dolor eget lacus ornare euismod. Fusce tincidunt sollicitudin quam. Nam non augue fermentum lorem vulputate rhoncus. Donec commodo orci a dui. Maecenas venenatis, magna ut lacinia molestie, nisl ipsum vehicula elit, et auctor arcu est in justo. Praesent varius gravida sem. Donec tincidunt sodales libero. Nulla interdum libero ac orci. Pellentesque quis velit in neque varius fringilla. Mauris tincidunt nunc non velit. Duis sed odio.</div>
<div class = "Post" id = "UjPost">Curabitur a dui consectetuer urna pharetra posuere. Nam tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut augue. Donec auctor vulputate sem. Cras mi magna, tempor vitae, vehicula id, condimentum dapibus, arcu. Donec pharetra pulvinar dolor. Proin vehicula. Vestibulum varius nisl nec ipsum. Ut ligula. Duis pretium nisl sit amet neque. Morbi commodo. Fusce sit amet mi ut dui imperdiet gravida. In venenatis eros eget nisl. Morbi dolor est, malesuada eu, feugiat vel, ultrices quis, nunc. Fusce mi. Nam nisl ante, elementum quis, lacinia convallis, faucibus varius, nunc. Aliquam ut eros.</div>
</div>
</div>
<div class = "UjCol" id = "UjCol" style="width:200px" >
<div class = "UjColControl">
<a onClick = "menuEventUj();">&nbsp;+</a> <input type = "text">
</div>
</div>
</div>

UjCol and PatCol are sliding menus. When these columns slide over ContCol_background and ContCol_text only ContCol_text is supposed to be displayed. However when the columns slide over one another UjCol and PatCol is displayed over both ContCol_text and ContCol_background. Its kind of a complicated webpage so if anyone has any questions Ill be glad to answer them. Also, if anyone has a bit of webspace ill upload the html and css files.

Thanks for any help.

-chorlick

 

It is important to note that z-index only works on positioned elements.

 

Posititioned using "absolute"?

-chorlick

 

relative, absolute, fixed

anything that comes after position: really

and it only works if the thing that you want it to go below is also positioned. They go above by default.