Descendant elements must always have a z-index higher than that of their parent. : Container Layout « Layout « HTML / CSS






Descendant elements must always have a z-index higher than that of their parent.

 


      <!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>

 








Related examples in the same category

1.Float right in a relative positioned container
2.Float left in a relative positioned container
3.everything floated
4.Nested floating container
5.float: right in a container
6.Absolute container and absolute children
7.relative position and absolute descendant
8.Absolute container and absolute child with offset to left and right
9.By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.
10.Smaller container but larger children
11.Stretched Absolute Top Aligned