Javascript Tricks, Samples, Tutorials & Howtos

New versions notifications available via

Follow jtricksdotcom on Twitter
/ / Building Blocks / Absolutely-positioned DIVs moving
Last updated: 03 Oct 2008
Absolutely-positioned DIVs moving
Absolutely-positioned DIV tags can be used to make your web page more dynamic without too much effort. However since the browsers generally render html of the web page differently, it might be difficult to position the DIV adequately.

The sample presented here will allow you to place an absolutely-positioned DIV attached to other page element.
Script demonstration

Script source code
To use the script perform the following steps:

  • Have absolutely-positioned DIV on the page. If you want it to appear directly on the target place, have it with style display:none.
  • Insert the following code somewhere on the page (or put in separate file and reference it):
<script type="text/javascript"><!--
/* Script by:
 * Version: 20081003
 * Latest version:
function attachAbsoluteBox(an, box, shift_x, shift_y)
    var cleft = 0;
    var ctop = 0;
    var obj = typeof an == 'object' 
        ? an : document.getElementById(an);
    var att = typeof box == 'object'
        ? box : document.getElementById(box);

    while (obj.offsetParent)
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    } = (cleft + shift_x) + 'px';

    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        ctop += parseInt(
    } = (ctop + shift_y) + 'px'; = 'block';

  • Use attachAbsoluteBox()function with with the object or its id to attach to, DIV object or its id to move and shifts on the x and y axis from the object's top left corner. For example:
    onclick="attachAbsoluteBox('button1', 'div1', 0, 0)">
        Attach to this button with x, y shifts = 0
                 document.getElementById('div1'), 10, 50)">
        Attach to this button with x shift = 10, y shift = 50
  • Be sure to verify page design with the Javascript turned off.
Browser compatibility
The javascript snippet above was tested on the following user agents:

Mozilla Firefox 3.0.x Ok.
Firefox 2.0.x Ok.
Firefox 1.5 Ok.
Firefox 1.0.x Ok.
Microsoft Internet Explorer 7.0 Ok.
Internet Explorer 6.0 Ok.
Internet Explorer 5.0 Ok.
Opera Opera 9.x Ok.
Opera 8.x Ok.
KHTML Safari 3.1.2 for Windows Ok.
Konqueror 3.5.5 Ok.
No Javascript or
Javascript turned off
Any Downgrades gracefully *.

*: Graceful degradation means the DIV will appear in it initial place if it was visible and will not be shown if it was initially invisible.