Positioning and stacking contexts Flashcards
What is the containing block of an element and why does it matter?
The containing block of an element is the area that containts the element. Most often, the containing block is the content area of an element’s nearest block-level ancestor.
The containing block of an element matters because the size and position of an element are often impacted by its containing block.
Percentage values that are applied to the width, height, padding, margin, and offset properties (top, bottom, right, left) of an absolutely positioned element are computed from the element’s containing block.
Source MDN
How can you identify the containing block of an element?
The process for identifying the containing block depends entirely on the value of the element’s position property:
- If the
positionproperty isstatic,relative, orsticky, the containing block is formed by the edge of the content box of the nearest ancestor element that establishes a formatting context (such as a table container, flex container, grid container, or the block container itself). - If the
positionproperty isabsolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other thanstatic(i.e.fixed,absolute,relative, orsticky). - If the
positionproperty isfixed, the containing block is established by the viewport (in the case of continuous media) or the page area (in the case of paged media). - If the
positionproperty isabsoluteorfixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following:
I. A `transform` or `perspective` or `fiter` value other than `none` II. A `will-change` value of `transform` or `perspective` or `filter` III. A `contain` value of `layout`, `paint`, `strict` or `content` (e.g. `contain: paint;`) IV. A `container-type` value other than `normal` V. A `backdrop-filter` other than `none` (e.g. `backdrop-filter: blur(10px);`)
Source MDN
What is an stacking context?
The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
Source MDN
When is an stacking context formed?
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
- Root element of the document (
<html>). - Element with a
positionvalue ofabsolute,fixedorsticky - Element with
position: relativeandz-indexvalue other thanauto. - A child of a flex container or a grid container, with
z-indexvalue other thanauto. - Element with an
opacityvalue less than1. - Element with a
mix-blend-modevalue other thannormal. - Element with any of the following properties with value other than
none:
transform,filter,backdrop-filter,perspective,clip-path,mask/mask-image/mask-border. - Element with an
isolation: isolate. - Element with a
will-changevalue specifying any property that would create a stacking context on non-initial value. - Element with a
containvalue oflayout, orpaint, or acompositevalue that includes either of them (i.e.contain: strict, contain: content).
Source MDN
What does position CSS property do?
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
Examples:
position: static; position: relative; position: absolute; position: fixed; position: sticky;
Source MDN
What does position: static do to an element?
- The element is positioned according to the normal flow of the document. The
top,right,bottom,left, andz-indexproperties have no effect. -
staticis the default value.
Source MDN
What does position: relative do to an element?
- The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of
top,right,bottom,left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. - This value creates a new stacking context when the value of
z-indexis notauto. - Has no effect on
table-*-group,table-row,table-column,table-cell, andtable-captionelements.
NOTE: Unlike fixed and absolute positioning, you cannot use top, right, bottom and left to change the size of a relatively positioned element. Those values will only shift the position of the element up or down, left or right. You can use top or bottom, but not both together (bottom will be ignored); likewise, you can use left or right, but not both (right will be ignored).
Source MDN
What does position: absolute do to an element?
- The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of
top,right,bottom,left. - This value creates a new stacking context when the value of
z-indexis notauto. - The margins of absolutely positioned boxes do not collapse with other margins.
Source MDN
What does position: fixed do to an element?
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
- It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a
transform,perspective, orfilterproperty set to something other thannone, or thewill-changeproperty is set totransform,perspectiveorfilter, in which case that ancestor behaves as the containing block. - Its final position is determined by the values of
top,right,bottomandleft. - This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.
Source MDN
What does position: sticky do to an element?
- The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of
top,right,bottomandleft. The offset does not affect the position of any other elements. - This value always creates a new stacking context.
- Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when
overflowishidden,scroll,auto, oroverlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
Source MDN
What is a positioned element?
A positioned element is an element whose computed ñposition value is either relative, absolute, fixed, or sticky' (In other words, it’s anything except static.)
Source MDN
What is the problem with fixed or stiky content?
Scrolling elements containing fixed or sticky content can cause performance and accessibility issues.
As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device’s processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone.
Source MDN
How can you solve performance issues of fixed or sticky content?
Adding
will-change: transform
to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.
Source MDN
How can you crete a modal backdrop that fills the entire viewport?
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
Using position: fixed and setting each of the four sides set to 0 makes the backdrop fill the entire viewport.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the containing block of a fixed positioned element?
The viewport
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the containing block of an absolute postioned element?
Its closest positioned ancestor element.
NOTE: If none of the element’s ancestors are positioned, then the absolutely positioned element will be positioned based on something called the initial containing block. This is an area with dimensions equal to the viewport size, anchored at the top of the page.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the containing block of an absolute postioned element?
its closest positioned ancestor element. (An element with position value different thatn static)
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the containing block element of a positioned element?
It is the block element the positioned element uses to position itself using top, right, bottom and left properties.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What is the render tree?
As the browser parses HTML into the DOM, it also creates another tree structure called the render tree.
The render tree represents the visual appearance and position of each element. It’s also responsible for determining the order in which the browser will paint the elements. This order is important because elements painted later appear in front of elements painted earlier, should they happen to overlap.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
How does the browser paints all the elements in a page?
The browser first paints all non-positioned elements, then it paints the positioned ones. By default, any positioned element appears in front of any non-positioned elements.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What does z-index CSS property do?
The z-index CSS property sets the z-order of a positioned element and its descendants. Overlapping elements with a larger z-index cover those with a smaller one.
In other words, elements with a higher z-index appear in front of elements with a lower z-index.
Elements with a negative z-index appear behind static elements.
Source MDN
What values does z-index CSS property accepts?
-
auto- Default value - The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is0. -
<integer>- This<integer>is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.
Source MDN
What gotchas does z-index CSS property have?
-
z-indexonly works on positioned elements. You cannot manipulate the stacking order of static elements. - Applying a
z-indexto a positioned element establishes a new stacking context. - When you add a
z-indexto a positioned element that element becomes the root of a new stacking context. All of its descendant elements are then part of that stacking context. - No element outside the stacking context can be stacked between any two elements that are inside it.
- If an element on the page is stacked behind a stacking context, no element within that stacking context can be stacked behind that element.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
Stacking contexts vs block formatting contexts
-
Stacking contextsdeal with which elements are in front of other elements; -
block formatting contextsdeal with the document flow and whether or not elements will overlap.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
In what order are stacked the elements within a stacking context?
In the following order:
- The root element of the stacking context
- Positioned elements with a negative
z-index(along with their children) - Non-positioned elements
- Positioned elements with a
z-indexof auto (and their children) - Positioned elements with a positive
z-index(and their children)
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
How can you keep track of z-index values?
It’s easy for a stylesheet to devolve into a z-index war, with no clear order as to the priority of various components. Without clear guidance, developers’ll give it a ridiculously high z-index, like 999999. After this happens a few times, it’s anybody’s guess what the z-index for another new component should be.
To prevent this you can use custom properties. That way you can see at a glance what is supposed to appear in front of what:
--z-loading-indicator: 100; --z-nav-menu: 200; --z-dropdown-menu: 300; --z-modal-backdrop: 400; --z-modal-body: 410;
Use increments of 10 or 100, so you can insert new values in between should the need arise.
Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.
What does sticky postioning (position: sticky;) do?
It’s sort of a hybrid between relative and fixed positioning: The element scrolls normally with the page until it reaches a specified point on the screen, at which point it will “lock” in place as the user continues to scroll.
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
Be aware that, It doesn’t work in IE
“position: sticky” (MDN Web Docs). Retrieved December 18, 2023.
