
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 Position Absolute


Normally, when start working with HTML and CSS, the default Flow Layout will be applied.
But there are multiple other layout modes, and this post talked about: **Positioned Layout**.
The Flow Layout algorithm tries very hard to make sure that multiple elements never occupy the same pixels (Unless you use negative margins).
With the positioned layout, we can break through it.

To use Positioned Layout, we need to use `position` property. This property can be set to: `relative`, `absolute`, `fixed` or `sticky`. There are a few more values, but these 4 values are the values that can change the way layout works.
Each of them works in a unique way, like a _mini layout algorithm_ within the layout algorithm.

## Static Positioning

`static` is the default value of `position` property.
That means that all these elements with the `static position` _not_ use Positioned Layout; they're using some other layout mode, like Flow Layout, Flexbox or Grid.
When referring to `static` elements, they are also called `statically-positioned` elements.

If an element currently using Positioned Layout, you can cancel it by changing the `position` property to `static` or `initial`

```css highlight=2
.box {
  position: initial;
}
```

There are the values `unset`, `revert` and `inherit`

- `unset` will cancel the current position property and change to parent position or initial position.
- `revert` to reset to user-agent stylesheet
- `inherit` to make the value same as the parent value

Although these values are rarely used.


CSS Position Relative