<Script language = JavaScript type = text/JavaScript>
<! --
Function getelementpos (elementid ){
VaR UA = navigator. useragent. tolowercase ();
VaR isopera = (UA. indexof ('Opera ')! =-1 );
VaR isie = (UA. indexof ('msie ')! =-1 &&! Isopera); // not opera Spoof
VaR El = Document. getelementbyid (elementid );
If (El. parentnode = NULL | El. style. Display = 'None ')
{
Return false;
}
VaR parent = NULL;
VaR Pos = [];
VaR box;
If (El. getboundingclientrect) // IE
{
Box = El. getboundingclientrect ();
VaR scrolltop = math.max(document.doc umentelement. scrolltop, document. Body. scrolltop );
VaR scrollleft = math.max(document.doc umentelement. scrollleft, document. Body. scrollleft );
Return {X: box. Left + scrollleft, Y: box. Top + scrolltop };
}
Else if (document. getboxobjectfor) // Gecko
{
Box = Document. getboxobjectfor (EL );
VaR borderleft = (El. style. borderleftwidth )? Parseint (El. style. borderleftwidth): 0;
VaR bordertop = (El. style. bordertopwidth )? Parseint (El. style. bordertopwidth): 0;
Pos = [box. X-borderleft, box. Y-bordertop];
}
Else // safari & Opera
{
Pos = [El. offsetleft, El. offsettop];
Parent = El. offsetparent;
If (parent! = El ){
While (parent ){
Pos [0] + = parent. offsetleft;
Pos [1] + = parent. offsettop;
Parent = parent. offsetparent;
}
}
If (UA. indexof ('Opera ')! =-1
| (UA. indexof ('safari ')! =-1 & El. style. Position = 'absolute '))
{
Pos [0]-= Document. Body. offsetleft;
Pos [1]-= Document. Body. offsettop;
}
}
If (El. parentnode) {parent = El. parentnode ;}
Else {parent = NULL ;}
While (parent & parent. tagname! = 'Body' & parent. tagname! = 'Html ')
{// Account for any scrolled ancestors
Pos [0]-= parent. scrollleft;
Pos [1]-= parent. scrolltop;
If (parent. parentnode) {parent = parent. parentnode ;}
Else {parent = NULL ;}
}
Return {X: POS [0], Y: POS [1]};
}
Function setposition ()
{
VaR Pos = getelementpos ('test _ 1 ');
VaR temp = Document. getelementbyid ("test_2 ");
Temp. style. Position = "absolute ";
Temp. style. Top = pos. Y + "PX ";
Temp. style. Left = pos. x + "PX ";
}
// -->
</SCRIPT>
<Div id = test_1
Style = "border-Right: Blue 1px solid; border-top: Blue 1px solid; float: Left; border-left: Blue 1px solid; width: 200px; margin-right: 100px; border-bottom: Blue 1px solid; Height: 200px "> </div>
<Div id = test_2
Style = "Background: red; overflow: hidden; width: 10px; Height: 10px"> </div> <br
Class = clear> <br> <input onclick = setposition () type = button value = "Click here to move the red element to the upper left corner of the DIV with a blue border">
<Br> <! -- ************************************ InstanceCodeEnd with ************************************ --> </div>
</Body>