Re: [csswg-drafts] [css-positioning] position: fixed within a stacking context

Thanks for the pointer @upsuper. There are [several css properties 
that create a new stacking 
context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context),
 between them `position: fixed` itself. 
It is not obvious what would be the outcome in situations where a 
`position: fixed` element is contained into a stacking context that is
 not the root stacking context.
What I ended up doing is trying all these css properties and see 
what's the behavior on the different browsers; FWIW here's my findings
 on creating a stacking context on `.container` through:

- `opacity, position, mix-blend-mode, fliter`: safari will crop the 
orange box, while chrome & firefox will not
- `perspective`: safari crops the orange box, while chrome & ff will 
make it scroll
- `will-change`: safari & ff don't crop neither scroll the orange box,
 chrome renders it behind the scrollbar

I'm not sure if these are bugs or by design, and couldn't easily find 
the spec that defines the desired behavior. Any pointer would be 
greatly appreciated :)

Would it be possible to at least mention that `position: fixed` 
elements are affected by stacking contexts of their parents?

-- 
GitHub Notification of comment by valdrinkoshi
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/400#issuecomment-239935245 
using your GitHub account

Received on Monday, 15 August 2016 21:30:26 UTC