so here's a basic example of what i'm trying to accomplish
Code:
<html><head><title>Untitled Document</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>



<div style="background: yellow none repeat scroll 0%; width: 500px; height: 500px;">
  <div style="background: green none repeat scroll 0%; width: 260px; height: 260px;z-index: 200; position: relative; top: 1px; left: 1px;"> 
    text </div>
  
  <div>

    <div style="background: red none repeat scroll 0%; width: 400px; height: 400px;z-index: 100; position: relative; top: 1px; left: 1px;"> 
      lots of text in this div </div>
  </div>



</div>


</body></html>
but the green div should be above the red div, and it's definitely not. what am I doing wrong?