<Html>
<Head>
<Style type = "text/css">
Html, body {
Width: 100%;
Height: 100%;
Margin: 0px;
Padding: 0px;
Overflow: hidden;
}
# Main {
Position: absolute;
Top: 0px;
Left: 0px;
Width: 100%;
Height: 100%;
Overflow: auto;
Z-index: 1;
}
# ToolBar {
Position: absolute;
Top: 3px;
Left: 50px;
Width: 300px;
Height: 20px;
Background: # ccc;
Z-index: 2;
Overflow: hidden;
}
</Style>
</Head>
<Body scroll = "no"> <! -- Scrol = "no" IE must -->
<Div id = "ToolBar"> fixed above does not move </div>
<Div id = "Main">
<P> & nbsddddddddddddddddddddddddddddddddddddddddddddddddddp; </p>
<P> & nbsxxxxxxxxcccccccccccccccccccxp; </p>
<P> & nbsp; </p>
<P> & nbcxvcxvcxvscfgdfgxvxvcxzvcsp; </p>
<P> & ncxvcxzvczxvcxzvczbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; dfdf </p>
<P> & nbscxzvcxzvcxzvczxvcxzp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsxzvcccccccccccccccccccccccccccccccccccccccp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsxcvvvvddddfffffffffffffffffffffffffffffffffffffp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; ddddddddddddddddddd </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbsxp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p>
<P> & nbxsp; </p>
<P> & nbsp; </p>
<P> & nbsp; </p> v
</Div>
</Body>
</Html>
Code 2.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Style type = "text/css">
Html, body {
Width: 100%;
Height: 100%;
Margin: 0px;
Padding: 0px;
Overflow: hidden;
}
# Main {
Position: absolute;
Top: 0px;
Left: 0px;
Width: 100%;
Height: 100%;
Overflow: auto;
Z-index: 1;
}
# ToolBar {
Position: absolute;
Top: 3px;
Left: 50px;
Width: 300px;
Height: 20px;
Background: # ccc;
Z-index: 7;
Overflow: hidden;
}
# ToolBa_2 {
Position: absolute;
Top: 300px;
Left: 50px;
Width: 300px;
Height: 20px;
Background: # ff0000;
Z-index3;
Overflow: hidden;
Color: # fff;
}
# ToolBa_3 {
Position: absolute;
Top: 600px;
Left: 50px;
Width: 300px;
Height: 20px;
Background: # ff0000;
Z-index32;
Overflow: hidden;
Color: # fff;
}
# ToolBa_4 {
Width: 300px;
Height: 200px;
Background: # ff0000;
Z-index35;
Overflow: hidden;
Color: # fff;
}
# ToolBa_5 {
Width: 300px;
Height: 200px;
Background: # ff0000;
Z-index39;
Overflow: hidden;
Color: # fff;
}
</Style>
</Head>
<Body scroll = "no"> <! -- Scrol = "no" IE must -->
<Div id = "ToolBar"> fixed above does not move </div>
<Div id = "ToolBa_2"> but the positions of all the divs on the page remain unchanged! </Div>
<Div id = "ToolBa_3"> but the positions of all the divs on the page remain unchanged! </Div>
<Div id = "ToolBa_4"> but the positions of all the divs on the page remain unchanged! </Div>
<Div id = "ToolBa_5"> but the positions of all the divs on the page remain unchanged! </Div>
<Div id = "Main">
<Br> <br> <br>> <br> <br> <br> <br>
</Div>
</Body>
</Html>