diff --git a/content/blog/portals/index.md b/content/blog/portals/index.md index 0373d714..54f78fab 100644 --- a/content/blog/portals/index.md +++ b/content/blog/portals/index.md @@ -352,7 +352,7 @@ While `relative` positioning is one way that you can take priority in a stacked - Non-positioned elements - Elements with a `float` style applied - Non-positioned inline elements -- Positioned elements without a `z-index` applied +- Positioned elements without a `z-index` applied, or with a `z-index` of `0` So, if we have the following HTML: @@ -508,6 +508,21 @@ Stacking Contexts are created when: > This list is non-exhaustive, but contains most of the highlights of when a stacking context is created. +It's worth mentioning that if a stacking context is created, then the element that created said stacking context is treated with priority `z` axis ordering. + +For example, if you have: + +```html +
+
Absolute
+
Opacity
+
+``` + +Then it will show "Absolute" above "Opacity", thanks to the order of the HTML sequence; this is all despite positioned elements typically being prioritized above HTML sequencing. + +If we remove the `opacity: 0.99` from the `"Opacity"` `div`, then `"Absolute`" will be on top. + ### Stacking Stacking Contexts While the previous sections have been head scratchers, let's dive into mind melting territory: You can contain stacking contexts within other stacking contexts. 🤯