Question on DIV height setting and DIV position based on window size

I have a Input text field and onClick on that, I open a div right below. position:absolute and have I have width and height set to 300px and overflow:auto. I have 4 div in the same page on 4 diff. input fields work they has behave the same way

now, I have set the height of the DIV based on the available space below the input field? The idea is to find the document height and subtrace div's position top, then I will know the Height available to set for DIV. But posTop is coming back as 0.

second quesiton is to place the DIV itself below the input field or above the input field based on the window/document size. That is if there is not enough space under a input field, to display DIV, then the DIV should appear above the input field. How to do that?

posTop is IE only and returns the top: property for positioned items.

so if you have<div style="position:relative;top:20px;left:100px;">
</div> then posTop for that element return 20

If the element is not positioned or have top:0px;, then posTop will return 0

You need to use offsetTop if you want the element position on the page.

I am sorry for not getting back immediately.

I tried to use offsetTop and my values for offsetTop and offsetLeft comes back as 0. the div's position is absolute. does that matter?

If I use jquery function offset() to get top and left. I am getting negative values (-57, -360) which does not make anysense