<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <title>The z-index</title> <style rel='stylesheet' type='text/css'> body { background: lightyellow; } div.container { height: 132px; position: relative; } div.zauto { position: absolute; border: 1px solid black; width: 100px; height: 100px; } div.zone { background: purple; top: 0; left: 0; } div.ztwo { background: orange; top: 10px; left: 10px; } div.zthree { background: magenta; top: 20px; left: 20px; } div.zfour { background: yellow; top: 30px; left: 30px; } div#nine { z-index: 4; } div#ten { z-index: 3; } div#eleven { z-index: 2; } div#twelve { z-index: 1; } div#nested div { top: 10px; left: 10px; } div.slide { float: left; padding: 5px; width: 200px; border: 1px solid rgb(200, 200, 200); background: white; margin: 5px; height: 400px; } </style> </head> <body> <div class='slide'> <div class='container' id='nested'> <div class='zauto zone' id='nine'> <div class='zauto ztwo' id='ten'> <div class='zauto zthree' id='eleven'> <div class='zauto zfour' id='twelve'></div> </div> </div> </div> </div> </div> </body> </html>
