<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <HEAD>
<TITLE> layers to move with the scroll bar </TITLE>
<meta http-equiv= "Content-type" content= "text/html" charset= "gb2312" >
</HEAD>
<style>
<!--
. div{
Position:absolute;
BORDER:2PX solid red;
Background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id= "javascript.div1" class= "div" style= "width:240px"; height:90px "align=" Center "> Center ...</div>
<script language= "JavaScript" >
function Sc1 () {
document.getElementById ("Javascript.div1"). style.top= (document.documentelement.scrolltop+ ( Document.documentelement.clientheight-document.getelementbyid ("Javascript.div1"). OffsetHeight/2) + "px";
document.getElementById ("Javascript.div1"). Style.left= (document.documentelement.scrollleft+ ( Document.documentelement.clientwidth-document.getelementbyid ("Javascript.div1"). OffsetWidth/2) + "px";
}
</SCRIPT>
<div id= "javascript.div2" class= "div" style= "width:240px"; height:90px "align=" center "> left Upper ...</div>
<script language= "JavaScript" >
function SC2 () {
document.getElementById ("Javascript.div2"). style.top= (Document.documentElement.scrollTop) + "px";
document.getElementById ("Javascript.div2"). style.left= (Document.documentElement.scrollLeft) + "px";
}
</SCRIPT>
<div id= "Javascript.div3" class= "div" style= "width:240px"; height:90px "align=" center "> Lower left ...</div>
<script language= "JavaScript" >
function Sc3 () {
document.getElementById ("Javascript.div3"). style.top= (document.documentelement.scrolltop+ Document.documentelement.clientheight-document.getelementbyid ("Javascript.div3"). OffsetHeight) + "px";
document.getElementById ("Javascript.div3"). style.left= (Document.documentElement.scrollLeft) + "px";
}
</SCRIPT>
<div id= "javascript.div4" class= "div" style= "width:240px"; height:90px "align=" center "> Right Upper ...</div>
<script language= "JavaScript" >
function Sc4 () {
document.getElementById ("Javascript.div4"). style.top= (Document.documentElement.scrollTop) + "px";
document.getElementById ("Javascript.div4"). style.left= (document.documentelement.scrollleft+ Document.documentelement.clientwidth-document.getelementbyid ("Javascript.div4"). OffsetWidth) + "px";
}
</SCRIPT>
<div id= "javascript.div5" class= "div" style= "width:240px"; height:90px "align=" center "> Lower right ...</div>
<script language= "JavaScript" >
function Sc5 () {
document.getElementById ("Javascript.div5"). style.top= (document.documentelement.scrolltop+ Document.documentelement.clientheight-document.getelementbyid ("Javascript.div5"). OffsetHeight) + "px";
document.getElementById ("Javascript.div5"). style.left= (document.documentelement.scrollleft+ Document.documentelement.clientwidth-document.getelementbyid ("Javascript.div5"). OffsetWidth) + "px";
}
</SCRIPT>
<script language= "JavaScript" >
<!--
function Scall () {
SC1 (); SC2 (); sc3 (); Sc4 (); Sc5 ();
}
Window.onscroll=scall;
Window.onresize=scall;
Window.onload=scall;
-->
</SCRIPT>
<div style= "Position:absolute; top:0px; left:0px; width:10000px; height:4000px; " ></div>
</BODY>
</HTML>
