The difference between various CSS positioning methods

static: Static positioning is the default value of position. The element box is generated normally, that is, it is displayed normally when there is no positioning.

Relative: Relative positioning

Usage 1: The element is offset by a certain distance relative to its original position, but the original space is still retained and appears as blank.

Usage 2: Set an element to position: relative; to make the child elements of the element absolutely positioned relative to the element.

Absolute: Absolute positioning

The element is removed from the document flow and positioned relative to the containing block. The element is closed in its original space. A block-level box is generated after the element is positioned, regardless of whether it was originally an inline element or a block-level element.

　 Containing block: The nearest position value is not a static ancestor element (block level or inline). Generally, an element is designated as the containing block of an absolutely positioned element, and its position is set to relative without offset.

Fixed: Fixed positioning

The element is removed from the document flow and positioned relative to the browser window, so it does not move as the document scrolls. The element is closed in its original space. A block-level box is generated after the element is positioned, regardless of whether it was originally an inline element or a block-level element. The only difference from absolute positioning is the containing block.

　Containing block: browser window.

Comparison between absolute/fixed and float

Similar: elements will be deleted from the document flow, but it will still affect the layout; a block-level box will be generated, regardless of whether it is a block-level element or not.

Difference: The containing block of float is the nearest block-level ancestor element.

　Offset attribute: top/right/bottom/left, the initial value is auto.

　After using position positioning, the offset attribute must be used to define the offset, which is the offset relative to the containing block. Note that it applies to elements whose position value is not static.

Sometimes it is also necessary to define width and height, but it may conflict with the definition of the offset attribute, because the four offset attributes actually define the size of the element. At this time, the left and right are defined according to the width and left attributes, and the top and bottom are defined according to the top and height attributes.

　 Content overflow overflow: visible/ hidden/ scroll /auto/ inherit, the initial value is visible.

　The size of an element is fixed, but its content cannot fit, which will cause overflow. Overflow controls the visibility, invisible (hidden), and scroll visibility (scroll) of the overflow part.

　Element visibility visibility: visible/ hidden/ collapse/ inherit, the initial value is visible.

The difference between visibility:hidden and display:none: visibility:hidden sets the element to be invisible, but the element will still affect the layout, but the element is partially rendered blank; display:none element is not displayed and is deleted from the document flow. Has no effect on document layout.