static: normal document flow positioning, meanwhile, the attributes of top, right, bottom, left 和 z-index are invalid, and the block-level elements are arranged vertically from top to bottom, the inline-level are arranged horizontally from left to right.
relative: relative positioning, the relative at this time is related to the position of the normal document flow.
absolute: related to the nearest no-static positioning the offset of ancestor element to determine the positioning of element. Such as an absolute positioning element, its parent and grandparent elements all are realtive, it will offset from its parent.
fixed: specify the position of element realted to the viewport of screen to specify the position of element. the potion of element will not change when the screen is scrolled. For example, the button that back to top generally uses this positioning methods.
sticky: Sticky positioning, the characteristics of it is similar to the combination of realtive and fixed, and its approximate effect in pratical applications is the top butt when the IOS address book scrolls.