# Positioning Elements With CSS

[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/position) for `position` property.

## Theory Time - Understanding Positioning

The `position` property with value `static` is applied by default to all elements in the *Document Flow*.

`position` property has the following values that we can set to change the position of an element:
* `static`
* `absolute`
* `relative`
* `fixed`
* `sticky`

To use the *positioning properties* like `top`, `right`, `bottom` and `left`, we need to change the value of `position` property from `static` to something else.

## Working With The `fixed` Value

We can use the `position: fixed` to keep our navigation bar from scrolling out of the viewport. For example:

```css
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
```


## Using The `position` To Add A Background Image 

`position: fixed` is useful when you want a background image that should not be the part of the *document flow*. But you'll see that by adding this rule to the image, it overlaps other elements. We can fix that using the `z-index`.


## Understanding the `z-index`

The default value for `z-index` is `auto`, which is `0`. Adding `z-index` to elements with no `position` property applied or with `static` value, the `z-index` doesn't work. Elements with same value of `z-index` follow the order of the elements in the HTML document, that is the elements declared later will be displayed above the elements declared before them.

```css
.background {
    backgound: url("");
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
}
```


## Styling And Positioning Our Badge With `absolute`

`absolute` positioned element is removed from the normal document, and is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.


## Diving Deeper Into `relative` Positioning

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`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the elemWent in the page layout is the same as if position were `static`.


## Working With `overflow` And Relative Positioning

Setting `overflow: hidden;` on parent element hides the relatively positioned element once its outside of the containing parent.

`overflow: hidden;` on `body` element by default doesn't work as it is passed on to the `html` element as a default CSS behavior, which can be overwritten by adding it to both `html` and `body` elements.


## `sticky` Positioning

`stickey` is a combination of `relative` and `fixed`. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting `top` to value other than `auto`) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.


## Understanding the Stacking Context

A stacking context is formed anywhere in the document by any element with a `position` value `absolute`, `relative`, `fixed` or `sticky`. Within a stacking context, the `z-index` values only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

Stacking context is formed in some other scenarios as well, which can be look at on its [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).