z-index-1.html (1404B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS 2.1 Test Suite: z-index</title> 5 <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" /> 8 <meta name="flags" content="" /> 9 <style> 10 .container { 11 position:absolute; 12 width:400px; 13 height:100px; 14 font-size:0; 15 background-color:yellow; 16 line-height:0; 17 z-index:0; 18 } 19 .container > div { 20 height:100px; 21 margin-bottom:-100px; 22 } 23 .negative { 24 width:380px; 25 background-color:blue; 26 position:relative; 27 z-index:-1; 28 } 29 .block { 30 width:360px; 31 background-color:purple; 32 } 33 .float { 34 float:left; 35 width:340px; 36 margin-right:-340px; 37 background-color:green; 38 } 39 .inline { 40 width:320px; 41 display:inline-block; 42 background-color:pink; 43 } 44 #outline { 45 width:300px; 46 outline:20px solid gray; 47 outline-offset:-20px; 48 } 49 .positioned { 50 width:280px; 51 background-color:magenta; 52 position:relative; 53 } 54 .positive { 55 width:260px; 56 background-color:orange; 57 position:relative; 58 z-index:1; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="container"> 64 <div class="positive"></div> 65 <div class="positioned"></div> 66 <div id="outline"></div> 67 <div class="inline"></div> 68 <div class="float"></div> 69 70 <div class="block"></div> 71 <div class="negative"></div> 72 </div> 73 </body> 74 </html>