Position:absolute/relative/fixed Summary

1, absolute positioning: position:absolute;

When the position of a div block is defined as an absolute positioning absolute, it also means that it loses the position of the document flow, and the subsequent document flow is immediately followed by the replacement position. If the absolute offset of the upper and lower left is 0, it will float in its original position, otherwise it will be positioned relative to the body of the first non-static property relative to the element, if there is no parent element of the non-static property. When the downward or right content beyond the browser's line of sight is not hidden, the scroll bar appears, but the left or up content is hidden after it is exceeded.

2, relative positioning: position:relative;

When a relative offset is set, the position that the Div occupies (the document stream) is not filled by the subsequent document flow, but is empty. When offset, all content beyond the browser's sight is hidden.

3, position:fixed; fixed positioning

Once set, the element moves out of the document stream, allowing the hierarchy to be fixed.

4, absolute/relative/fixed three differences:

① relative positioning relative does not lose the position of the document stream, and the absolute positioning absolute loses its position in the document flow and is replaced by the content behind it.

② whether it is a relative positioning relative, fixed positioning or absolute positioning absolute, when the offset content is outside the upper and left browser form (that is, the viewable area), the content will be hidden, but when the offset content exceeds the right, the following form, Relative positioning relative hides the out-of-bounds, while the fixed-positioning, absolute-position absolute will appear with scroll bars.

③ relative positioning relative, fixed positioning and absolute positioning absolute will be out of normal document flow, floating on the normal document flow, if the normal flow of the document is obscured, can be resolved by setting the Z-index.

5, Absolute/relative/fixed practical application

The value of ①position is absolute or fixed to create a BFC

BFC: block-level formatting context, the floating element frame up, floating will not overflow, equivalent to a separate container on the page, the child elements inside the container will not affect the outer elements.

BFC effect: A. Clear floating

B. Prevent margin folding

C. Left and right two-column layout

②position:fixed enables the layer to be fixed, such as making the navigation bar not scroll with the page scrolling.

③ Absolute Positioning These values can not be specified, can be automatically calculated: Top/left/right/bottom/width/height, if the conflict, the width and height prevail. Dealing with conflicts can also make some use, such as centering.

Position:absolute/relative/fixed Summary