CSS Positioning
Syntax
- position: static|absolute|fixed|relative|sticky|initial|inherit|unset;
- z-index: auto|number|initial|inherit;
Parameters
| Parameter | Details |
|---|---|
| static | Default value. Elements render in order, as they appear in the document flow. The top, right, bottom, left and z-index properties do not apply. |
| relative | The element is positioned relative to its normal position, so left:20px adds 20 pixels to the element's LEFT position |
| fixed | The element is positioned relative to the browser window |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
| sticky | Experimental feature. It behaves like position: static within its parent until a given offset threshold is reached, then it acts as position: fixed. |
| unset | Combination of initial and inherit. More info here. |
Remarks
Normal Flow is the flow of elements if the position of element is static.
- defining width is beneficial because in some cases it prevents overlapping of element's content.
