I have an Angular 1.5 application.
I have a .5 opacity div that covers the view / think modal. The project has changed a bit and now I need to get this div covering the entire window. The project uses ui-router.
My understanding, (writing CSS for 7 years) is that 'fixed' uses the context of the window - however, the div will not stick to the window and instead stays within it's nested view. I've actually attempted mimic fixed positioning in a div in the past and it wasn't possible, so how is that happening here? Does the view create a new context? and can I override that?
This could be a 1 line fix or a series of services and a partial re-write given the larger reasoning behind this.
<div ui-view ng-cloak class='main-outlet'></div>
>>> <div class="xxx"></div>
It turns out that this has nothing to do with 'view' or Angular or ui-router or Ember / MVC nesting etc, however, I'm going to leave this here for those who might also get lost on this subject. I didn't know where to start - so hopefully, this can help someone.
The reason why the fixed context has changed, in my case, is that I used
transform: translate(x,x) to center something.
translate() changes the context and
fixed no longer refers to the window, but this new context defined by the element with the translate rule. This is really great if you want to do this on purpose, but there seems to be no way to override it...