When you first start out in CSS the stacking context is not something you come across too often, a few z-index rules will normally sort you out. However, it has bitten me in the bum a few times so thought I would share some insight into it.
What is the CSS Stacking ContentA stacking context is a group of layers in the DOM, that are stacked in a specific order. in its most basic form, this is the root HTML element on the page. However, this is the part that is often overlooked and can be the source much pain in debugging layering issues in CSS. The stacking context can be formed, anywhere in the document, by any element in the following scenarios:
- The root element of the document (usually the HTML tag).
- An element with a position value “fixed” or “sticky”
- Element with a position value “absolute” or “relative” and z-index value other than “auto”.
- The element that is a child of a flexbox container, with a z-index value other than one set to “auto”.
- An element with an opacity value less than 1.
- An element with a mix-blend-mode value other than “normal”.
- Element with a -webkit-overflow-scrolling value “touch”.
- Any element with the following properties with a value other than “none”:
- mask / mask-image / mask-border