Relative and absolute lost.
Position:relative: The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.
Position:absolute: The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
Three keywords: offset position, document flow impact, and occupy space.
----------Map Demo Split line-----------------------------------I love the front end------------------------------------graph demo Split Line------------------ -----------------I love the front-end--------------------------------------------------------graph demo Split Line----------------------------------- I love the front----
Body offset relative to upper left corner of browser
Position:relative Cyan Relative text offset 20px:
The Position:absolute cyan block is relative to the block offset 20px (the position will be calculated based on the 0 point in the top left corner of the browser):
Relative parent element Offset:
Positon:relative the relative blue block offsets 20px, the nearest element moves the offset;
Postion:absolute relative Blue block offset: Why not position the offset relative to the blue block on the left?
Dick and Harry argument: if the parent element is not set without declaring position:relative, then absolute positioning (absolute) is automatically positioned in the upper-left corner of the body.
This sentence is only half right, go back to the top carefully read absolute definition of the second sentence "containing the block";
The correct thing is that the parent element sets the position value is not static, so the child element is positioned absolutely as the containing block.
The absolute positioning reference is his containing block.
This article only describes offset location, document flow, and occupy space.
PS: A lot of things only look at others article (reason), still write bad code (too bad life), must own running.
Little tip: "CSS" position mobile location
