
How does the browser decide which element to render "on top" when elements overlap?

## Default Behavior

- When all siblings are rendered in Flow layout, the DOM order controls how the background elements overlap, but the content will always float to the front.
- If one sibling uses positioned layout, it will appear above its non-positioned sibling, no matter what the DOM order is.
- If both siblings use positioned layout, the DOM order controls which element will be on top. Unlike in Flow layout, the content does not float to the front.

## Using z-index

- `z-index` is a CSS property that allows you to control the order of elements in the stacking context.
- `z-index` only works with positioned elements.
- `z-index` can also be used with flex/grid children.
- The `z` in `z-index` refers to the `z` axis in 3D space.
- Default value of `z-index` is `auto`, which equates to `0`.

### Negative z-indexes

`z-index` values must be integers, and they are allowed to be negative.
Even though it won't offer much benefit.

## Stacking Contexts

`z-index` isn't a global value, it's a value applied to a stacking context.
An website is collection of stacking contexts. Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.

- Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
- Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

### Creating new contexts

Here are some declarations that create a new stacking context:

- Setting `opacity` to a value less than `1`
- Setting `position` to `absolute` or `relative` and `z-index` value other than auto.
- Setting `position` to `fixed` or `sticky` (No `z-index` needed for these 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`

More info on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)

### Debugging stacking contexts

Here is a super awesome tool to help you debug stacking contexts: [Stacking Contexts Inspector](https://github.com/andreadev-it/stacking-contexts-inspector)


CSS Stacking Contexts


Some notes about CSS Position Absolute.

Normally, elements will be ordered follow the order of the HTML. This is referred to as Flow layout.
These days, it's also can be referred to as Flex layout, because Flex is too popular.

But when we want to break the rules, take elements out of flow, in these cases, `absolute position` is the option.

## Placement based on the frame

When applying `position: absolute`, we can place the element based on **the box it's being constrained by** and **ignore its "natural" position**.

The placement based on 4 properties: `top`, `left`, `right`, `bottom`.
These properties can be set to `px`, `%`.

## Default Placement

When we setting `position: absolute`, and doesn't apply any anchor `top`, `left`,... The element will **sit in its default in-flow position**.
We can think of it as "inheriting" the position from the Flow layout.

## Effect on layout

When setting `position: absolute`, we pull the element **out of the flow**.
When the browser laying out elements, it will ignore the absolute elements. The absolute elements kind of a ghost, stick in specificed spot.

## Collapsing parents

It can be quite annoying when we need to setting up the parents and the child.
When we set `position: absolute`, the parent will ignore the child, and sometimes can cause collapse.
Example:

```html
<style>
  .parent {
    border: 4px solid;
  }

  .child {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
    opacity: 0.5;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>
```

## Absolute sizes

The thing is, when we apply absolute positioning, the display value will be ignored. The same happen for position `fixed`, `sticky`,.. except the `relative` and `static`, which is the default position.
And to determine the size of the element, `absolute` position will try to fit the content as small as it can and also still fit in the containing block. It will try its best to follow the rules defined in the CSS spec.

## Centering Trick

Because the `absolute` position is trying the best to follow the rules in CSS spec, so we can center element with the following spec:

```css
.box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100px;
  height: 100px;
  margin: auto;
  background: lightgreen;
}
```

The trick works by 4 following properties:

- Absolute position `position: absolute`
- equal distance from each edge `top`, `left`, `right`, `bottom`
- a fixed size
- Hungry margins `margin: auto`


CSS Containing Blocks

Flow Layout

Absolute positioning

Small note