I have a multi layered page which contains 3 main layers:
Layer 1 should always be in the back of the page
Layer 2 should always be in front of layer 1
Layer 3 should be in front of layers 1 and 2 but it contains within it a list of nodes with fixed positioning. Each node represents an 'object' which on click will trigger a modal using an Angular JS directive.
These modals are organized in a standard format: .modal-wrap > .modal-viewport > .modal, .modal, .modal etc
You can see the layout here: Example of the problem
The problem arises as when a user clicks on a node and the modal is rendered, all nodes BEFORE the selected node appear below the modal window in the stack but all nodes AFTER appear to be above the modal window. I understand that fixed positioning creates a new stack context as do transforms.
I need help figuring how what the styling (and doc structure if absolutely necessary) must be in order to make sure that the modal windows remain in front while active and the nodes remain in their expected order.
I have tried all sorts of tinkering with Z-index. I have tried stuffing the modals into an element that is a sibling to layers 1, 2 and 3. Nothing works. The only thing that works is manually lowering the z-index in the web inspector. Doing this programmatically using a timeout after directive render does not work.
I would greatly appreciate any help.
