z-index-020.xht (3042B)
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 Test: z-index</title> 5 <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 7 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" /> 9 <link rel="match" href="z-index-020-ref.xht"/> 10 <link rel="match" href="z-index-020-ref2.xht"/> 11 <style type="text/css"> 12 .container { 13 z-index:0; 14 position: relative; 15 height: 200px; 16 width: 200px; 17 font-size: 0; 18 line-height: 0; 19 background: silver; 20 border: solid white; 21 } 22 .container div { 23 height: 80px; 24 width: 80px; 25 padding: 10px; 26 } 27 .test div { 28 margin-bottom:-75px; 29 } 30 .negative { 31 margin-left: 100px; 32 background-color:navy; 33 position:relative; 34 z-index:-1; 35 } 36 .block { 37 margin-left: 100px 38 background-color:fuchsia; 39 } 40 .float { 41 margin-left: 75px; 42 margin-top: 0; 43 float:left; 44 background-color:blue; 45 } 46 .inline { 47 margin-left: 50px; 48 margin-top: 0; 49 display: inline-block; 50 vertical-align: bottom; 51 background-color: aqua; 52 } 53 .positioned { 54 margin-left: 25px; 55 background: lime; 56 position:relative; 57 margin-bottom: -80px !important; # 75 + 5 58 } 59 .positive { 60 background-color: teal; 61 position:relative; 62 z-index:1; 63 } 64 65 .test .outline { 66 outline: solid fuchsia 5px; 67 margin: 0 20px -80px; 68 padding: 0; 69 width: 110px; 70 height: 85px ; 71 } 72 73 .control .outline { 74 border: solid fuchsia 5px; 75 width: 110px; 76 height: 85px; 77 padding: 0; 78 } 79 80 .outline.c1 { 81 margin: 30px 5px 100px; 82 } 83 .outline.c2 { 84 padding: 0; 85 margin: -20px -45px; 86 } 87 .outline.c2 > div { 88 margin: -20px 5px 0; 89 } 90 91 .control div { 92 margin-left: -35px; 93 margin-top: -35px; 94 } 95 .control > div { 96 margin-left: auto; 97 margin-top: 100px; 98 } 99 </style> 100 </head> 101 <body> 102 <div class="test container"> 103 <div class="positive"></div> 104 <div class="positioned"></div> 105 <div class="outline"></div> 106 <div class="inline"></div> 107 <div class="float"></div> 108 <div class="block"></div> 109 <div class="negative"></div> 110 </div> 111 112 <p>The pattern above must match one of the two patterns below.</p> 113 114 <div class="control container"> 115 <div style="background: navy"> 116 <div style="background: blue"> 117 <div style="background: aqua"> 118 <div style="background: lime"> 119 <div style="background: teal"> 120 <div class="outline c1"> 121 </div> 122 </div> 123 </div> 124 </div> 125 </div> 126 </div> 127 </div> 128 129 <div class="control container"> 130 <div style="background: navy"> 131 <div style="background: blue"> 132 <div style="background: aqua"> 133 <div class="outline c2"> 134 <div style="background: lime"> 135 <div style="background: teal"> 136 </div> 137 </div> 138 </div> 139 </div> 140 </div> 141 </div> 142 </div> 143 144 </body></html>