By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased. : Container Layout : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » Container Layout »

 

By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.


 

      <!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(200200200);
          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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» Container Layout