Detailed positioning properties in position: relative and absolute

Positioning Tags: position

Include attribute: relative (relative)

Absolute (absolute)

1.position:relative; If you are relative to an element, first it will appear where it is located. It then moves the element "relative to" its original starting point by setting the vertical or horizontal position. (again, relative positioning, regardless of whether or not to move, the element still occupies the original space.) Therefore, moving an element causes it to overwrite other boxes)

Relative positioning: Relative is not out of normal document flow, is positioned relative to its original position, and its original placeholder information still exists

2.position:absolute; Represents absolute positioning, and the position is calculated based on the upper-left corner of the browser. Absolute positioning keeps elements out of the document flow and therefore does not occupy space. The layout of elements in a normal document flow is as if an absolutely positioned element does not exist. (Because the absolutely-positioned boxes are independent of the document flow, they can overwrite other elements on the page and can control its hierarchical order by Z-index.) The higher the value of the Z-index, the more it displays on the upper level. ）

Absolute positioning: ablution out of the document flow and floating model, exists independently of other objects, and does not occupy a position.

3. The parent container uses relative positioning, and when the child element uses absolute positioning, the position of the element is no longer relative to the upper-left corner of the browser, but relative to the upper-left corner of the parent window

The following specific case description:

1. If c is nested in B, and the b,c are relative positioning, then the relative positioning of C is relative to B, B retains the placeholder information, and B retains the placeholder information of C.

2. If c is nested in B, B is absolutely positioned, C is relatively positioned, B is detached from the float, there is no placeholder information, and C is positioned relative to B, and a placeholder occurs in B.

3. If A,b,c,d is tied and nested in a DIV with ID group, and:

#group {potision:relative;height:200px;width:4oopx;} #b {potision:absolute;left:20px;top:20px;}
In this way, the parent element is relative positioning, but does not set the value of Left,top, it can be regarded as a floating object, and B is absolute positioning, and thus does not occupy a bit, but because the parent element is relative positioning, the absolute positioning here becomes relative to the parent element's absolute positioning, not relative to the browser.
For example:

<div id= "main" ><div id= "a" >aaaaaaaaaa</div><div id= "B" >bbbbbbbb</div></div>

(1) If you set the Position:absolute to a, it will get rid of the normal flow of the document, a will not occupy a bit, that is, B is no longer based on a, but directly from the parent to start positioning. (b position is the same as without a).

If you set position:relative for a, (not out of the document Stream) A will occupy, a is positioned relative to his original position, appears to be floating on main, and B will be arranged in the original way, not affected by a. (The position of B is the same as a without position attribute)
(2) If the Position:relative/absolute is set to main, then the absolute positioning or relative positioning of a or b inside is relative to the parent element main, followed by a relative or absolute method to locate
Note: If the parent element does not have a valid height value set, then B is the absolute position of the parent element relative to the upper-right corner of the last element in group to set the width-height!!!!!!