DIV positioning, absolute/relative

My goal here is to create a DIV positioned absolutely containing DIV's positioned relatively to the absolutely positioned DIV. I am going to paste the code I have so far. The Problem I am having is that instead of overlapping these DIV's they are being displayed one after another. My reason for doing it this way is that i want to be able to copy/paste a block of code, and only change one coordinate instead of changing all of them. If I can figure out how to do it this time, I can apply it to things in the future, so this isn't just a matter of the fact that there's a simpler way to do this. If anyone is able to show me what I am missing in order to make the relative divs overlap within the absolute DIV, I would be very grateful. thank you kindly.

<BODY style="background-color: #000000;"> 
<DIV style="position: absolute; top: 20px; left: 20px; height: 220px; width: 330px;"> 
<DIV style="position: relative; top: 0px; height: 200px; left: 0px; width: 300px; background-color: #110011;"></DIV> 
<DIV style="position: relative; top: 1px; height: 198px; left: 2px; width: 296px; background-color: #220022;"></DIV> 
<DIV style="position: relative; top: 2px; height: 196px; left: 4px; width: 292px; background-color: #330033;"></DIV> 
<DIV style="position: relative; top: 3px; height: 194px; left: 6px; width: 288px; background-color: #440044;"></DIV> 
<DIV style="position: relative; top: 4px; height: 192px; left: 8px; width: 284px; background-color: #550055;"></DIV> 
<DIV style="position: relative; top: 5px; height: 190px; left: 10px; width: 280px; background-color: #660066;"></DIV> 
<DIV style="position: relative; top: 6px; height: 188px; left: 12px; width: 276px; background-color: #770077;"></DIV> 
<DIV style="position: relative; top: 7px; height: 186px; left: 14px; width: 272px; background-color: #880088;"></DIV> 
<DIV style="position: relative; top: 8px; height: 184px; left: 16px; width: 268px; background-color: #990099;"></DIV> 
<DIV style="position: relative; top: 9px; height: 182px; left: 18px; width: 264px; background-color: #aa00aa;"></DIV> 
<DIV style="position: relative; top: 10px; height: 180px; left: 20px; width: 260px; background-color: #bb00bb;"></DIV> 
<DIV style="position: relative; top: 13px; height: 177px; left: 23px; width: 257px;"> 
<?php 
$ads = 'ads displayed here'; 
echo $ads; 
echo '<BR>' . $ads . '<BR>' . $ads; 
?> 
</DIV> 
</DIV> 
</BODY>

DIV positioning, absolute/relative

aligning divs w/ relative position inside div w/ absolute position

mylungsarempty

penders

mylungsarempty

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week