To explain David's answer a bit:
You use CSS absolute positioning to position a div (or "Panel") that is not
nested in any other element or Control, so that in the HTML it is a child of
the document or form (the form has no effect on positioning). This makes its
position relative to the HTML document itself. You can then position it
using a combination of CSS "left", "top", "right" and/or "bottom" styles
absolutely relative to the document.
Your next problem, of course, is that the document is often larger than the
browser window or ViewPort. If so, the element may be positioned outside of
the ViewPort, such as an element that is positioned at the top of the
document, when the document is scrolled down.
This requires the use of JavaScript to solve (JavaScript + HTML = DHTML).
You have to get the position relative to the top of the window. Fortunately,
the HTML DOM element document.documentElement has a "scrollTop" and
"scrollLeft" property, which indicates the distance from the top/left of the
document and the top/left of the window. So, if you want to position your
element at, say, 20 px down from the top of the window, and 20 pixels to the
right of the left edge of the window, you add 20 to
document.documentElement.scrollTop to get the "top" position style and 20 to
document.documentElement.scrollLeft to get the "left" position.
However, you're not done yet. CSS styles are strings which include the
measuring unit. The pixel measuring unit is "px" - so, you use JavaScript to
concatenate the number to the string "px" to get something like "20px".
JavaScript Example:
function setInfoDiv(x, y)
{
var el = document.getElementById("infoDiv");
var xOffset = x + document.documentElement.scrollLeft;
var yOffset = y + document.documentElement.scrollTop;
el.style.left = xOffset + "px";
el.style.top = yOffset + "px";
}
Now you still have one hurdle to jump. What happens when the document is
scrolled, up, down, left or right? You have to use JavaScript to handle the
"scroll" event of the document. for this, you create an event handler
function that takes 1 argument, an event. You can use this to call the
function above. Example (compatible with IE and FireFox):
function handleScroll(e)
{
setInfoDiv(20, 20);
}
document.onscroll = handleScroll;
Here are a couple of resources that may help:
http://www.quirksmode.org/resources.html
http://developer.mozilla.org/en/docs/DOM:element
--
HTH,
Kevin Spencer
Microsoft MVP
Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net