HTML CSS-A brief discussion: relative positioning and absolute positioning_html/css_WEB-ITnose

Relative and absolute positioning

·Positioning tag: position
·Containing attributes: relative ) Absolute (absolute)

1.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, during 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)


2.position:absolute; means absolute positioning, The position will be calculated starting from 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 by z-index. The higher the z-index, the further up it appears.)


3. The parent container uses relative positioning, and the child element uses absolute positioning, so that 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


4. Relative positioning and absolute positioning need to be used with top, right, bottom, and left to locate the specific position. These four attributes only take effect after the element is positioned, and are invalid in other cases. In addition, these four attributes can only use two adjacent ones at the same time. You cannot use up and down at the same time, or use left and right at the same time.

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.