1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: Z-index - dynamically setting z-index to bring an element from back to in front of</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" title="Section 9.9.1 Specifying the stack level: the 'z-index' property" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">
10 <meta http-equiv="Content-Script-Type" content="text/javascript">
11 <meta content="dom" name="flags">
12 <meta content="Setting the 'z-index' property of a positioned element can bring it from behind the surface on a lower stack level to a greater stack level passing it in front of another element painted on the surface." name="assert">
13
14 <style type="text/css">
15 #test
16 {
17 background-color: green;
18 display: block;
19 z-index: -1;
20 }
21
22 #red-layer
23 {
24 background-color: red;
25 top: -100px;
26 z-index: auto;
27 }
28
29 #test, #red-layer
30 {
31 height: 100px;
32 position: relative;
33 width: 100px;
34 }
35 </style>
36
37 <script type="text/javascript">
38 function fromBottomToTopOfStack()
39 {
40 document.getElementById("test").style.zIndex = 1;
41 }
42 </script>
43
44 </head>
45
46 <body onload="fromBottomToTopOfStack();">
47
48 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
49
50 <div><span id="test"></span></div>
51
52 <div id="red-layer"></div>
53
54 </body>
55 </html>