Here are the details of my problem.
My site concerns playing games with perspective and geometry. In keeping with this spirit much of the navigation is done via a navigation cube. This occurs in many forms throughout the site.
Basically an image of a cube with navigation instructions or arrows is displayed at the top of the page. It is a button with the cube image embedded in it. When moused over it triggers a PopUp containing another button with the same identical cube image embedded in it but with text or arrows darker or lighter. This pops up in exact registration with with the cube below that triggered it. To the eye it appears simply as if the text and arrows have become lighter or darker when moused over. It’s a graphic equivalent of the classic text button colour change.
It works a treat on all my fixed pages but I have run into a problem with fixed headers on scrolling pages.
I have made a simple one page site to show the problem. It contains a dark grey rectangle across the top which is fixed to top of page. The light grey page beneath can scroll. In the rectangle I have placed a navigation cube. The top image shows this.
The second image shows the same page with the cube moused over.
The third image shows how the page is constructed.
The fourth shows what happens to the PopUp when the page is scrolled slightly.
To make this work I need to place the PopUp inside the fixed to top group. But I cannot! However I try to drag it in the layers palette or cut and paste it. It refuses to be grouped and insists on staying outside the group.
So am I doing this wrong or am I trying to do something that quite simply is not permitted?
If so is there a work around?
This little fellow is intrinsic to the entire site design and I really need to find a way to get him to stick in place on scrollable pages with fixed to top headers.