
`overflow` is a condition that happens when content doesn't fit into its parent's content box.

## Accepted values

`overflow` default value is `visible`. It can also be set to other values:

- `scroll`: add scroll bar
- `auto`: adds a scrollbar when one is required
- `hidden`: remove scroll bar no matter what

`overflow` is a shorthand for 2 distinct properties:

- `overflow-x`
- `overflow-y`

## Scroll container

A scroll container is a scrollable box that exists within a webpage. When we set either `overflow-x` or `overflow-y`, we turn the selected element into a scroll container.

Children of a scroll container are essentially locked inside that box. They can't ever spill outside its parent's bounds. They can't be used to allow "normal" visible overflow in one axis.

## Horizontal Overflow

By default, in flow layout, browser will break the line when the next element can't fit in the current line.
So we don't have the horizontal scroll bar.
To fix that, we can opt in the `white-space: nowrap` property.

## Overflow with absolute positioned elements

Absolutely-positioned elements act just like static-positioned elements when it comes to overflow. If the parent sets `overflow: auto`, _as long as that parent is the containing block_, it will allow that child to be scrolled into view.

## Overflow with fixed positioned elements

When it's come to fixed positioned elements, we need to remember that the fixed elements is contained by the viewport. It's doesn't care about the parent's overflow.
So even when the parent has `overflow: auto`, the child will still out of flow and doesn't have any effect to the parent.


CSS Overflow


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 Fixed Positioning

Fixed without anchor points?

The transform exception