Q:

jQuery Mobile: absolute external panel on right side not working

I want to use an external header and two external panels, one at the left, one at the right.  The catch: The panels should be always visible on big screens. 
I had some problems positioning the panels with an external header (internal works fine), which I could solve for the left panel when using 
position: absolute;
left: 0;
top: 4em;

However, this does not work with the right panel, using
position: absolute;
right: 0;
top: 4em;

just places it above the left panel. 
You can see this on this jsFiddle: https://jsfiddle.net/9eb4mekr/
When I use position: relative; float: right; instead, the right panel will be on the right but below every other panel (try it in the jsFiddle). 
Any Idea on proper positioning of external panels when always visible (big screens)?  Plus an external header? 

A:

I found the problem.  Well, not really the problem, but at least the solution, thanks to Tasos Anastasiou: Setting the header position to fixed, e.g. with data-position="fixed" in the header div will make relative positioning work again on both panels :)
Here is an updated, working jsFiddle: https://jsfiddle.net/vhkmok8o/

