How to change the top position of a div with respect to another div dynamically?

Question

For now I have displayed the div like this

the code is

createWindow: function()
{
    var qWindow = new Element('div', {id: 'quick-window'});
    qWindow.innerHTML = '<div id="quickview-header"><a href="javascript:void(0)" id="quickview-close">close</a></div><div class="quick-view-content"></div>';
    document.body.appendChild(qWindow);
    $('quickview-close').observe('click', this.hideWindow.bind(this)); 
},
showWindow: function()
{

    $('quick-window').setStyle({
        top:  document.viewport.getScrollOffsets().top + 100 + 'px',
        left:  document.body.clientWidth/2 - $('quick-window').getWidth()/2 + 'px',
        display: 'block'
    });
},

I need the position to be changed dynamically..accoring to the product list height in magento.. Something like this

Need your help.. I am using prototype.js

Answer 1

You could use getBoundingClientRect(); on the product list item which will give you left & top relative to the top-left of the viewport.

See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

and

http://javascript.info/tutorial/coordinates