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. Atransformorperspectiveorfitervalue other thannone
II. Awill-changevalue oftransformorperspectiveorfilter
III. Acontainvalue oflayout,paint,strictorcontent(e.g.contain: paint;)
IV. Acontainer-typevalue other thannormal
V. Abackdrop-filterother thannone(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.
