# Positioning

# `position:`

Default: position: static

An inline-element becomes a block-element if it's position is other than static.

Value	Description
static	- Default value (does not need to be specified) - offset properties (`top, bottom` etc.) will not work - `z-index` is also ignored -`margin` works
relative	- element’s position is relative to its default position on the page - leaves a "ghost" on the original position in the document flow. Original space is still occupied - offset properties (`top, bottom` etc.) are working - rarely used
absolute	the element will scroll with the rest of the document when a user scrolls - removed from flow: all other elements on the page will ignore the element and act like it is not present on the page - offset properties working: -If parent is `position: static`: postition relative to the whole screen . -If parent-position is other than `static`: postition relative to the parent (-> it can make sense to put absolute elements in a relative container)
fixed	- the element will remain fixed to its position no matter where the user scrolls on the page. - often used for navigation bars - removed from flow - doesn't care about the parent - positioned to the browser window tip: create a dummy-container for empty space (esp. for footer and header)
sticky	- A sticky element toggles between relative and fixed, depending on the scroll position. - It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed)

The z-index property controls how far “back” or how far “forward” an element should appear on the web page when elements overlap css stacking evans