Twitter Bootstrap, popover scroll in separate panels

Question

I have a problem with Twitter bootstrap popover scroll. I have read and searched for a solution with no luck.

I have made buttons with popovers in separate panels, and when I scroll, the popover does not stay with the button. I.e it stays fixed while the panel scrolls.

This is not a problem when I scroll the entire page; only in the separate panels. Please see live demo here, and screenshot below for reference.

(I have some further problems with the same layout, but will create separate questions for those).

AH! as Schmalzy helped me figure out it was simply a parent that needed position relative. Then a new problem popped up, as illustrated below. How do I get the popover to lie on top of all panels?

Answer 1

You can change its positioning to relative and it seems to work correctly.

.popover{
    position: relative; 
}

Although this will push your text/content of the panel down past the popover...

Here is a fiddle that demos it.

Also, this seems to work with no changes needed in 3.0RC1

Here is a fiddle with this in 3.0RC1

Answer 2

If you change the popover's parent container to position: relative it will scroll with the panel.

jsFiddle