The absolute, fixed, and relative differences of CSS position

First, we should understand the default value of position--static

Static

Default value, no positioning, element appears in normal stream, i.e. ignore top, bottom, left, right or Z-index declaration

Absolute

Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor .

The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

Characteristics: Out of normal flow

Fixed

Generates an absolutely positioned element that is positioned relative to the browser window .

The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

Characteristics: Out of normal flow

Relative

Creates a relative positioned element, positioned relative to its normal position.

Therefore, "left:20" adds 20 pixels to the left position of the element.

Characteristics: No escape from normal flow

Absolute and fixed

Common	1. It will change the way the inline element is rendered, and display will be set to block 2, will let the elements out of normal flow, do not occupy space 3, the default will be overridden on the non-anchored elements, you can also adjust the overwrite order through the Z-index declaration
Different points	1. The root element of the absolute can be set, while the fixed root element is pinned to the current window (APP) 2, (commonly used) when you scroll, the distance between the fixed element and the window (application) is constant.

Absolute and Relative

Different points

1. Absolute refers to the upper-left corner of the parent element, and relative the original point of the reference element (for example, "left:20" adds 20 pixels to the leftmost position of the element) 2, relative Z-index can not define the parent-child relationship, must be the child on the parent; absolute multiple layers can change the layer overlap order using the Z-index attribute

Absolute, fixed, and relative differences in CSS position