Bootstrap bootstrap menu position

I have a modal window that opens from the main window.

This modal dialog now has a text box (auto suggestion type) and the user gets a list of suggestions as they type. I am using Bootstrap typeahead for the same thing.

So I am using

typeTimeout = setTimeout(function(){
    var _input = me.$element,
        _offset = _input.offset();

    _menu.css({
        position: "fixed",
        height: "auto",
        overflow: "visible",
        left: _offset.left,
        top: _offset.top + _input.outerHeight(),
        "z-index": 999999
    });
}, 5);

      

        
        
        
      

    

Now my question is, if the modal is called without scrolling in the main window, the suggestion list is displayed in the correct position (i.e. just below the textbox)

However, let's say I scroll vertically downward and then invoke a modal dialog, in which case my suggestions are not displayed in the correct vertical position (they move downward).

How do I fix this problem?

I tried changing the position from fixed to absolute, but that doesn't help as my parent for suggestions is a relative div.