Home > Article > Web Front-end > 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 andfloating 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.
<div id="main"> <div id="a">aaaaaaaaaa</div> <div id="b">bbbbbbbb</div> </div>
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
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!