4 ms·
The key takeaway: > New stacking contexts can be formed [… w]hen an element has an > opacity value less than 1. I had no idea that was the case. The CSS
by taylorfausak 14y ago
The key takeaway:
> New stacking contexts can be formed [… w]hen an element has an
> opacity value less than 1.
I had no idea that was the case. The CSS 2.1 spec [1] notes that "other properties may introduce stacking contexts, for example
'opacity'". The CSS 3 spec [2] elaborates:
> Since an element with opacity less than 1 is composited from a
> single offscreen image, content outside of it cannot be layered
> in z-order between pieces of content inside of it.
[1]: http://www.w3.org/TR/CSS2/visuren.html#z-index http://www.w3.org/TR/CSS2/visuren.html#z-index
[2]: http://www.w3.org/TR/2010/PR-css3-color-20101028/#transparency http://www.w3.org/TR/2010/PR-css3-color-20101028/#transparen...
- pattern 14y agoMy main takeaway was the following: Z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. I know I have scratched my head in the past trying to get z-index do what I want, and this knowledge probably would have helped!
- Hansi 14y agoAgree, I remember that it took me a while to figure this out when I first tried playing with z-indexes.