[HTML + CSS]: relative and absolute positioning, and htmlcss

[HTML + CSS]: relative and absolute positioning, and htmlcss

Relative and absolute positioning

· Positioning tags:Position
· Includes 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)


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 .)


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.


4. Relative positioning and absolute positioning must be used with top, right, bottom, and left positioning to locate specific locations. These four attributes take effect only after the element is positioned. Otherwise, they are invalid.In addition, these four attributes can only use two adjacent attributes at the same time. They cannot be used even if they are used or left or right.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.