z-index-020-ref2.xht (2171B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Reference: z-index (option B)</title> 5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <style type="text/css"> 8 .container { 9 z-index:0; 10 position: relative; 11 height: 200px; 12 width: 200px; 13 font-size: 0; 14 line-height: 0; 15 background: silver; 16 border: solid white; 17 } 18 .container div { 19 height: 80px; 20 width: 80px; 21 padding: 10px; 22 } 23 24 .control .outline { 25 border: solid fuchsia 5px; 26 width: 110px; 27 height: 85px; 28 padding: 0; 29 } 30 31 .outline.c1 { 32 margin: 30px 5px 100px; 33 } 34 .outline.c2 { 35 padding: 0; 36 margin: -20px -45px; 37 } 38 .outline.c2 > div { 39 margin: -20px 5px 0; 40 } 41 42 .control div { 43 margin-left: -35px; 44 margin-top: -35px; 45 } 46 .control > div { 47 margin-left: auto; 48 margin-top: 100px; 49 } 50 </style> 51 </head> 52 <body> 53 54 <div class="control container"> 55 <div style="background: navy"> 56 <div style="background: blue"> 57 <div style="background: aqua"> 58 <div class="outline c2"> 59 <div style="background: lime"> 60 <div style="background: teal"> 61 </div> 62 </div> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 69 <p>The pattern above must match one of the two patterns below.</p> 70 71 <div class="control container"> 72 <div style="background: navy"> 73 <div style="background: blue"> 74 <div style="background: aqua"> 75 <div style="background: lime"> 76 <div style="background: teal"> 77 <div class="outline c1"> 78 </div> 79 </div> 80 </div> 81 </div> 82 </div> 83 </div> 84 </div> 85 86 <div class="control container"> 87 <div style="background: navy"> 88 <div style="background: blue"> 89 <div style="background: aqua"> 90 <div class="outline c2"> 91 <div style="background: lime"> 92 <div style="background: teal"> 93 </div> 94 </div> 95 </div> 96 </div> 97 </div> 98 </div> 99 </div> 100 101 </body></html>