1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <link rel="reference" href="z-index-020-ref.xht">
5 <title>CSS Test: z-index</title>
6 <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org">
7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
8 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">
10 <meta name="flags" content="">
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>