Css position: relative and absolute usage

Positioning tag: position

Include attributes: relative (relative)

Absolute (absolute)

1. position: relative; if a relative element is located, it first appears at its location. Then, move the element relative to its original start point by setting the vertical or horizontal position. (Another point is that elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element will overwrite other boxes)

Relative positioning: relative is not isolated from the normal document stream. The configured element is located relative to its original location, and its original placeholder information still exists.

2. position: absolute; indicates absolute positioning. The position is calculated based on the browser's upper left corner. Absolute positioning disconnects elements from the document stream, so it does not occupy space. The layout of elements in a normal document stream is the same as that when an absolutely positioned element does not exist. (Because the absolute positioning boxes are irrelevant to the document stream, they can overwrite other elements on the page and control their hierarchical order through z-index. The higher the value of z-index, the more it is displayed on the upper layer .)

Absolute positioning: ablution exists independently of the document stream and floating model and has no placeholder.

3. Parent container uses relative positioning. After 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 is a case description:

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

2. If c is nested in B, B is absolutely positioned, and c is relative positioned, B is detached from floating without placeholder information, and c is positioned relative to B, and a placeholder occurs in B.

3. If a, B, c, and d are parallel, and all of them are nested in the div whose id is group, and:

The code is as follows:	Copy code
# Group {potision: relative; height: 200px; width: 4 oopx ;}# B {potision: absolute; left: 20px; top: 20px ;}

In this way, the parent element is relative positioning, but the left and top values are not set. You can think of it as a floating object, while B is absolute positioning, so it is not placeholder, however, because the parent element is relatively located, the absolute positioning here becomes absolute positioning relative to the parent element, rather than relative to the browser.
For example:

The code is as follows:	Copy code
<Div id = "main"> <Div id = "a"> aaaaaaaaaa </div> <Div id = "B"> bbbbbbbbbb </div> </Div>

(1) If you set position: absolute for a, it will disallow a from the normal document stream, and a will not hold the position, that is, B is not based on a, but is located directly from the parent. (Location B is the same as location ).

If you set position: relative for a (not out of the document stream), a will hold the space, and a will position his original position, which looks like it is floating on the main, B is arranged according to the original method, and is not affected by. (The position of B is the same as that of a when there is no position attribute)
(2) If you set position: relative/absolute for main, the absolute or relative positioning of a or B in it is relative to the parent element main, and then locate it in relative or absolute ways.
Note: If the parent element does not set a valid wide high value, B is relative to the upper right corner of the last element in the group to absolutely locate the parent element.