Using z-index Positioning in CSS

1. Create a new HTML document with an internal stylesheet.

2. Create a div in CSS and name it Red. Define its position as relative. Define its position as top:10px and left:50px. Define its dimensions 500px by 500px. Define its background-color as red.

3. Create another div and name it Blue. Define its position as absolute. Define its position as top:40px and left:20px. Define its dimensions as 300px by 300px. Define its background-color as blue.

4. Create another div and name it Yellow. Define its position as relative. Define its position as top:30px and left:20px. Define its dimensions as 100px by 100px. Define its background-color as yellow.

5. Create another div and name it Green. Define its position as absolute. Define its position as top:200px and left:100px. Define its dimensions as 50px by 50px. Define its background-color as green.

6. In the HTML, type the tags for all of the divs. Place the Yellow div inside the Red div. Place the Green div before the Blue div.

7. Define div.Red's z-index as 1. Define div.Blue's z-index as 2. Define div.Yellow's z-index as 100. Define div.Green's z-index as 100.

8. When the Green div's z-index is default, it appears below the Blue div because of normal CSS stacking rules. When its z-index is set higher than the Blue z-index, it appears on top of the Blue div. The Yellow div doesn't appear on top of the Blue div despite its higher z-index because its nexted inside the Red div, which has a lower z-index.