Why does setting position of my div to fixed interfere with flyout div?

Question

I have this fiddle : https://jsfiddle.net/reko91/yg0rs4xc/13/

Notice when clicking the button and the flyout appears you cant click on anything. When you do, the flyout disappears.

Here is the working fiddle : https://jsfiddle.net/reko91/yg0rs4xc/14/

It's due to me changing the position of the wholeContainer div from fixed to absolute.

Can someone explain why this is ?

Answer 1

When you set an element to position:fixed the element becomes relative to the document instead of relative to it's parent. That means that you have to add a z-index if you want the element to behave normally.

https://jsfiddle.net/yg0rs4xc/15/

When it's absolute, it is relative to it's parent so there is no need to add a z-index.