<!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'> 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.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'> <div class='zauto zone'></div> <div class='zauto ztwo'></div> <div class='zauto zthree'></div> <div class='zauto zfour'></div> </div> </div> </body> </html>