Examples of DHTML and CSS Style

The following three colored and overlapping boxes were made possible by absolute positioning and the z-index properties provided by CSS style blocks located within the <head> tags of this document. Rather than have you have to do a "view source" to see these style blocks, I pasted them into each of the boxes that they created.

Box 1

This is the Style Block 

for Box 1:

#box1 {position:absolute; 
  width:280px; 
  height:350px; 
  top:250px; 
  right:auto; 
  bottom:0; 
  left:20px; 
  background-color:white; 
  z-index:10; 
  border-left:outset blue; 
  border-top:outset blue; 
  border-right:outset blue; 
  border-bottom:outset blue;
  color:black;}

Box 2

This is the Style Block 

for Box 2:

#box2 {position:absolute; 
  width:280px; 
  height:350px; 
  top:270px; 
  right:auto; 
  bottom:0; 
  left:250px; 
  background-color:yellow; 
  z-index:20; 
  border-left:outset blue; 
  border-top:outset blue; 
  border-right:outset blue; 
  border-bottom:outset blue;
  color:red;}

Box 3

This is the Style Block 

for Box 3:

#box3 {position:absolute; 
  width:280px; 
  height:350px; 
  top:290px; 
  right:auto; 
  bottom:0; 
  left:500px; 
  background-color:green; 
  z-index:30; 
  border-left:outset blue; 
  border-top:outset blue; 
  border-right:outset blue; 
  border-bottom:outset blue; 
  color:yellow; }

Notes

Finally, after much fussing and fuming and trying every combo of number, percent, positioning type (relative, absolute, fixed), I finally think I understand this stuff... kind of. So by the time I decided to create this page, it only took me about an hour. The first page I implemented the positioning property with (coolinks.html), it only took me about three days to get it working. Any questions about the coding, use the email icon below.