[RESOLVED] how to place an autoFill DIV tag?

[sneakyimp]

I have an AJAX-enabled page containing an autofill form. When someone enters two or more chars in the input field, an AJAX query fetches all the matching names from a table and lists them in a floating DIV so the user can select using the cursor keys or a mouse. I'm having trouble getting that DIV element to position itself properly under the input field.

I was using this function to find the location of the DIV tag relative to the browser window which it does quite well:

function getPos2(obj) {
    var curleft = curtop = 0;
    if (!obj.offsetParent) {
        alert("Your browser does not support a necessary feature.  Please upgrade to a newer browser");
        return;
    }
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
        curleft += obj.offsetLeft
        curtop += obj.offsetTop
    }
    return [curleft,curtop];
} // findPos()

After using that function to obtain the position of the input field, I was placing the DIV tag using this:

/* Positions selected element at given x/y coordinates */
function positionElement(xPos,yPos,targetElement){
    targetElement.style.position    = "fixed";
    targetElement.style.left        = xPos+"px";
    targetElement.style.top         = yPos+"px";
}

It works really super well UNTIL i scroll down the page. Then the floating DIV hovers in the same spot while the page scrolls up. If i set style.position='absolute' then the placement is wrong.

I looked up position:absolute and found this:
"An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties"

Can anyone suggest how I might alter my getPos function to find the position of an element 'relative to its containing block' ?

[cgraz]

You need to set it's containing block to position: relative. then when you use position:absolute on the div, it will positioned relative to the containing block.

[sneakyimp]

It is difficult to describe just how much you rule. That worked!

If you have some extra time, perhaps you could explain what that did exactly?

[cgraz]

when you set the position of an element to absolute, it is positioning that element in an exact location that you specify (relative to top, left, bottom, right of page). If you have an element that is positioned absolutely, the position will be based on the page itself. If, however, you set it's container to position: relative, it becomes a wrapper of sort for absolute positioning any containing elements.

Absolute positioning of the element now will be within the bounds of it's containing block. So setting: top: 0; right: 0; would place it at the top right of the containing block as opposed to the top right of the page itself.

I use this technique often - it's incredibly handy.

[sneakyimp]

Ok I was about to take issue with your description when I realized that there are many elements within the page I was working with that have style.position = relative. This is what caused my autofill menu to be placed wrongly in the first place which is why i started resorting to fixed.

You have helped me tremendously and I thank you!