Position Layout

The defining feature of this layout is that it allows items to overlap.
Can be set to:
- Relative
- Absolute
- Fixed
- Sticky
- Initial / Static: essentially turns off position layout for that element.
Opting into position layout gives access to new CSS properties like the following which allow us to shift elements around the screen:
- top
- right
- bottom
- left
Position doesn't affect layout! (This is they key difference between this and using margin or padding)
auto keyword works horizontally and vertically, whereas in flow layout, it only worked horizontally.
inset can be used to set a value to all edges at once (top, right, bottom, left)

Relative Positioning

It does 2 things:
1. Constrains certain children
2. Enables additional CSS properties to be used
When we use top, right, bottom and left. These values will be based off of the elements natural position.
Relative positioning is great when we want nudge elements around a little bit while using their positional context.

Absolute Positioning

Used for breaking the rules and sticking an element wherever we want!
Typically used for UI elements that need to float above the UI like tooltips, decorative elements like abstract illustrations, or stacking multiple elements in the same place like a deck of cards.
Notice that if an element is using absolute positioning, it won't be treated like normal in the DOM which can lead to other elements taking the space the absolute positioned element leaves behind.
The absolute element by default stacks on top of the surrounding text.
Centering trick:
- absolute positioning
- equal distances from the edges (ideally 0)
- fixed size (width & height)
- hungry margins (margin: auto)
Absolute elements can only be contained by other elements using Positioned Layout.
- When being positioned (say in the top right corner top: 0px; right: 0px;) the algorithm will recursively look up the tree for the first element in position layout.
- If it can't find a parent position lay ed out element to use as a container, it will result to using the viewport.
REALLY USEFUL for putting little decorations on containers. Just need the container to be in position layout then use absolute for the decorations.

Stacking Context

When all siblings are rendered in Flow Layout, the DOM ordering determines rendering order but all the content will float to the front.
If one sibling uses Positioned Layout, it will appear above its non-positioned sibling, regardless of DOM ordering.
If both use Positioned Layout, the DOM ordering determines it again but the text wont all float to the front this time.
However we can customize stacking context with the z-index property:
- z-index only works with positioned elements
- The higher the number the "higher" up on the stack it will be rendered (e.g. 2 will render in front of 1)
- it defaults to zero, so any number higher than 0 can be used to promote it.
- z-index isn't global, children a compared within a parent context.
  - This can be referred to as a stacking context. All you need to create a stacking context is for an element to have a position that isn't static and a z-index.
  - Some ways to declare a new stacking context:
    - Combining z-index property with position property.
    - Setting opacity to a value less than 1
    - Setting position to fixed or sticky (no z-index needed for this values)
    - Applying a mix-blend-mode other than normal.
    - Adding a z-index to a child inside a display:flex; or display:grid; container
    - Using transform, filter, clip-path, or perspective
    - Explicitly creating a context with isolation: isolate;, arguably the best for intentionally creating a stacking context.
If we don't specify a z-index in position layout, elements will be rendered in DOM order.

Portals with React

We can render in different contexts by moving the rendering context to be a sibling of the root element.
This is achieved with portals.
A handy trick is to add isolation: isolate on the root div element to isolate its stacking context so that any portal element will be rendered in the front.

Fixed Positioning

Similar to absolute positioning but isn't restrained by any containers, it only works off of the viewport.
Fixed elements are immune to scrolling. Which can make it create for things like modals, navbar or tooltips.

The transform, filter and will-filter properties can ruin fixed elements if put on an ancestor of a fixed element, it will make it behave as if its absolute.

Below is a code snippet than can be copy and pasted into the browser console to find out which element is causing issues. which can be super handy for larger, more complex applications:

// Replace “.the-fixed-child” for a CSS selector
// that matches the fixed-position element:
const selector = '.the-fixed-child';

function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }

  let parent = elem.parentElement;

  while (parent) {
    const {
      transform,
      willChange,
      filter,
    } = getComputedStyle(parent);

    if (
      transform !== 'none' ||
      willChange === 'transform' ||
      filter !== 'none'
    ) {
      console.warn(
        '🚨 Found a culprit! 🚨\n',
        parent,
        { transform, willChange, filter }
      );
    }
    parent = parent.parentElement;
  }
}

findCulprits(document.querySelector(selector));

Once we found the element we can:
1. try to remove or replace the CSS property
2. if we can't change the CSS property, we can use a portal, or find a different way to move the fixed element to a different container.
Note this script won't work if the element is in an iframe due to the element being in a sub HTML document.
If we want to search an iframe there is a drop down in the inspector pane that will allow you to select the iframe, run the script again in the console once selecting.

Overflow

the hidden, scroll and visible values for the overflow property all create a scroll container.
hidden just hides the scroll bars so it seems like it's not there.
The clip value actually hides the content as it doesn't create a scroll container.
You can't pick and choose between x and y in a scroll container, both directions scroll.
- If you want to hide a specific axis you have to use clip.
- However, this isn't supported in all browsers yet.
- A potential issue with this is if we're tabbing links, hidden will scroll because its a scroll container but in clip it wont. Meaning a user can lose where they are on the page.
white-space can be used put elements such as images on the same line to get a horizontal scroll.
- It essentially lets us tweak how words and other inline/inline-block elements wrap
In position layout, a child will ignore its parent in terms of overflow if the parent isn't using positioned layout as well.

Sticky Positioning

Allows the element to "stick" to the edge on scroll.
Transitions the element from relatively positioned to a fixed position.
In addition to setting position: sticky, you also need to stick the element to an edge (top, right, bottom, left).
- top: 0px is commonly used
Sticky elements are not incorporeal, they are laid out in-flow and take up space unlike absolute and fixed elements.
NOTE: the element will never leave its parent container, this makes it more absolutely positioned rather than fixed.
- This is the most common reason as to why sticky "won't work" sometimes, it is stuck to the confines of its parent container.
Sticky elements will stick to the scroll container if it's its parent, so if you make a scroll container with auto, hidden or scroll. This can lose intended the sticky functionality.
- The sticky element will only stick in that scroll container.
Position sticky can only stick in one context

Below is a script to run in the browser console that will locate which container the sticky element is sticking to if you can't find it.

// Replace “.the-sticky-child” for a CSS selector
// that matches the sticky-position element:
const selector = '.the-sticky-child';

function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }

  let parent = elem.parentElement;

  while (parent) {
    const { overflow } = getComputedStyle(parent);

    if (['auto', 'scroll', 'hidden'].includes(overflow)) {
      console.log(overflow, parent);
    }

    parent = parent.parentElement;
  }
}

findCulprits(document.querySelector(selector));

Hidden Content

Need to be aware of the different types of hiding techniques and the trade-offs, because lack of knowledge could lead to accessibility issues.
display: none: essentially removes the element from the DOM. Completely invisible and incorporeal.
visibility: hidden: hides the element but it still takes up space in the DOM. It's invisible but not incorporeal.
opacity: items hidden with opacity aren't really hidden at all. They take up space, can be clicked or tabbed, etc.
aria-hidden: true: hides content for screen readers but not visually.

Offset (top, right, bottom, left)

relative positioning: element is shifted from its natural, in-flow position.
absolute positioning: element is distanced from its containing block edge.
fixed positioning: element is adjusted based on the viewport.
sticky positioning: the value controls the min gap between the element and the edge of the viewport whilst the container is still in frame.

Return