Jess Collicott <JCollicott@msiinet.com> wrote:

> I would like the element to be positioned relative
> to where the event took place to move the
> element (onclick for example), and be visually
> consistent whether the page has been scrolled
> or not.

Sadly, you can't do it in DOM Level 2 Events. The event object has a
(screen-relative) screenX and (window-relative) clientX property, but no
page-relative property, which is of course by far the most useful one.
IE's window.event object has an ancestor-relative offsetX property which
you can use to get it, but there's no way to get that in Mozilla (even
though Moz implement's IE's offsetX for other elements). Another IE-only
way is to read document.body.scrollTop to work out how to turn
client-relative into page-relative co-ordinates.

A IE/Moz workaround would be to ensure the parent element (eg. body) of
the thing you want to position never scrolls. This can be achieved by
putting all the content in a scrolling div separately from the
positionable element, eg.:

  HTML
  <body>
    <div id="content">Lorem ipsum thingy blah</div>
    <div id="floating">I appear under your mouse!</div>
  </body>

  CSS
  #floating { position: absolute;
    visibility: hidden; z-index: 2;
  }
  #content { position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: auto; z-index: 1;
  }

Then the window-relative clientX and clientY values are useful, since
they can be used to position the 'floating' div regardless of scrolling.
and@doxdesk.com