popup layer inside scrollable div

Question

I have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.

The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.

How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?

Any help is appreciated. Thanks.

Answer 1

This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.

of course then use top: -px and left: -px to set a value for its position within the element.