1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Position set to 'fixed'</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#choose-position">
8 <meta name="flags" content="interact">
9 <meta name="assert" content="The 'position' property applies the value 'fixed' and places the element out of flow of the document and locks it to a specific point on the viewport.">
10 <style type="text/css">
11 #wrapper
12 {
13 height: 3000px;
14 }
15 #div1
16 {
17 background: red;
18 border: 3px solid orange;
19 }
20 #div2
21 {
22 background: blue;
23 left: 1in;
24 position: fixed;
25 top: 1in;
26 }
27 </style>
28 </head>
29 <body>
30 <p>Test passes if there is no red visible on the page, the blue box shrinks to the size of the contents and is completely shifted below the orange line. Also when scrolling the blue box stays at its same position on the screen, all other content can scroll.</p>
31 <div id="wrapper">
32 <div id="div1">
33 <div id="div2">Filler Text</div>
34 </div>
35 </div>
36 </body>
37 </html>