Relative and absolute of position property values

The common features of both are:

1. Change document Flow

2. Activating elements left, top, right, bottom, Z-index properties

3. Let the Elements "float", z-index>0.

The difference is:

1.position:relative retains the element's own placeholder in the z-index:0 layer, with its left, top, right, and bottom relative to its position in the z-index:0 layer.

2.position:absolute completely out of the document flow, without preserving the element's own placeholder in the z-index:0 layer, its left, top, right, and bottom are relative to their own closest definition to the parent layer of absolute or relative, and the parent layer is not necessarily its immediate parent layer. If absolute or relative are not defined in their parent layer, they are positioned relative to the body

Light-looking theory may not have a specific understanding, so come, there is a picture of the Truth ╰ (￣▽￣) ╭

(image from: Css+div Location Analysis (relative,absolute,static,fixed)-The diary of a broken-hearted utopia-NetEase blog http://blog.163.com/love_heartbreaking/blog/static/ 124561901201211334714800/)

1.relative Reserved Placeholder

2.absolute does not retain a placeholder

3.relative relative to placeholder

4.absolute relative to itself the nearest definition is absolute or relative's parent layer

5.absolute absolute or relative are not defined in the parent layer, the relative body is positioned

Relative and absolute of position property values