A detailed explanation of the position positioning of the page layout

Here is the layout of the page I give you position positioning, interested students can go to see.

When using Div+css for page layouts, the position positioning is understood as follows:

1. (current element) position:relative, not out of the layout of the document flow, relative to its own position of the offset, the original position when the white space after the element will not be filled, that is, the current element and the relative position of the subsequent elements (or the relative order) will not change, I generally understand that the order of the current element and subsequent elements will not change in any way.

2. (current Element) Position:absolute, out of the layout of the document flow, the original position when the white space is filled by the following elements, the starting position of the position is the parent element (position is not static) or body, Also, the position of the current element relative to the parent element or body is fixed, but subsequent elements may move to the front of the current element, which I generally understand is that the order of the current element and subsequent elements may change.

3. (current Element) position:fixed, similar to absolute, but does not change the position with the scroll bar movement (for example, some Web pages in the lower right corner of the ad, when the scroll bar, the position of the ad is unchanged), when the browser shrinks to this element is not visible, Scroll bars do not appear on the page.

4. (current element) position:static, default value.

Above is I organize to everyone's page layout position positioning, hope in the future will be helpful to everyone.

Related articles:

Detailed introduction to CSS page layout tips

Explain the basics of CSS in detail.

JQUERY+CSS3 implementation of the drop-down navigation menu function