Relative positioning and absolute positioning in CSS

As I said before, there are three basic layout mechanisms for CSS: normal flow, floating, and absolute positioning. Unless specifically specified, all boxes are positioned in the normal stream. The position of the element box in the normal stream is determined by the position of the element in the HTML.

• Relative positioning

Relative positioning is actually considered to be part of the normal flow positioning model because it moves the element relative to its original position by setting the vertical or horizontal position. Moreover, although it is removed from its original position, it still occupies the space occupied by the original. can use Left,right to control the element to the right, left to move, you can use Top,bottom to control the movement of the bottom of the element. It is important to note that when relative positioning, the numeric offset is for the element itself, while the percentage is relative to the width and height of the containing block. Such as:

• Absolute positioning

Absolute positioning is one of the 3 positioning mechanisms in CSS that makes the positioning element irrelevant to the document flow and therefore does not occupy space. Other elements in the document flow are laid out as if an absolutely positioned element does not exist.

The position of an absolutely positioned element is relative to the nearest positioned ancestor element, and if the element does not have a positioned ancestor element, its position is relative to the initial containing block document.

Absolute positioning Element Scalability: When we set width to auto (or not set), the absolute positioning element automatically scales its size according to its left and right. The same is true for top and bottom.

Absolute positioning element is centered: Because the absolute positioning element is scalable, if we set the width of the absolute anchor element to auto, and the left and right is set to 0, then the element fills its relative parent element horizontally. At this point if we set the width to a fixed value, margin is auto, as long as left and right values equal (or both 0), and no more than its relative elements minus the absolute positioning element width of half, you can achieve horizontal center.

The same is true for vertical centering, as long as top is equal to the value of bottom, so that our absolute positioning element is vertically centered.

Relative positioning and absolute positioning in CSS