Detailed explanation of positioning attribute position: relative and absolute

Positioning tag: position

Contains attributes: relative(relative)

                                                                                                                                               

position:relative; If an element is positioned relatively, first it will appear at its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, when relative positioning, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes)

Relative positioning: relative does not break away from the normal document flow and is set The element is positioned relative to its original position, and its original placeholder information still exists

2.position:absolute; means

absolute positioning, and the position will be calculated based on the upper left corner of the browser. Absolute positioning takes the element out of the document flow so it doesn't take up space. Elements in normal document flow are laid out as if absolutely positioned elements were not present. (Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page and their hierarchical order can be controlled via z-index. The higher the z-index value, the more visible it is. At the upper level.)

Absolute positioning: ablution is separated from the document flow and

floating model, and exists independently of other objects, without placeholders.

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

Specific case description:

1. If c is nested in b, and b and c are both relatively positioned, 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 positioned absolutely, and c is positioned relatively, then b is out of float and has no placeholder information, while c is positioned relative to b, and placeholder occurs in b.

3. If a, b, c, d are juxtaposed and are all nested in a div with the id of group, and:

#group{potision:relative;height
:200px;width:4oopx ;}      #b{potision:absolute;left:20px;top:20px;}
In this way, the parent element is relatively positioned, but the values ​​of left and top are not set. It can be regarded as Floating object, and b is absolutely positioned, so it does not occupy space. However, since the parent element is relatively positioned, the absolute positioning here becomes absolute positioning relative to the parent element, not relative to the browser.

For example:

(1) If position: absolute is set to a, a will be separated from the normal document flow, and a will not occupy a position, that is, b is no longer based on a, but directly from parent Start positioning. (The b position is the same as without a).

If position:relative is set for a, (without breaking away from the document flow), a will occupy the position. A is positioned relative to its original position, and it appears to be floating on main, while b It will be arranged in the original way and will not be affected by a. (The position of b is the same as when a has no position attribute)
(2) If position is set to main: relative/absolute; then the absolute positioning or relative positioning of a or b inside is relative to the parent element main. Then position according to the relative or absolute method

Note: If the parent element does not set a valid width and height value, b is absolutely positioned relative to the upper right corner of the last element in the group. The parent element needs to be set. Width Height! ! ! ! ! ! ###

The above is the detailed content of Detailed explanation of positioning attribute position: relative and absolute. For more information, please follow other related articles on the PHP Chinese website!