How do I position en element relative to the visible area of the page?

How do I position en element relative to the visible area of the page?

Hello,

I have a <div> that I am positioning absolutely, which displays some content when the user clicks a button. At the moment, I position this using the "top" CSS proeprty, to put it 30 pixels from the top of the page.

This is fine if the user hasn't scrolled the page, but if they have, they either only see the bottom of the <div>, or they may not see any of it.

How do I position it to be 30 pixels below the top of the visible portion of the page? I've searched for ages, but not found anything that works.

Thanks for any help.