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