Detailed interpretation of positioning in page layout

The following is the positioning of the page layout that I have compiled for you. Interested students can take a look.

When using div CSS for page layout, position positioning is understood as follows:

1. (Current element's) position: relative, a layout that does not break away from the document flow , relative to the offset of its own position, when the original position is blank, the following elements will not be filled, that is, the relative position (or relative order) of the current element and the following elements will not change. I usually understand it as: no matter How, the order of the current element and subsequent elements will not change.

2. (Current element's) position: absolute, separated from the layout of the document flow. When the original position is blank, it will be filled by subsequent elements. The starting position of positioning is the parent element (position is not static) or Body, that is, the position of the current element relative to the parent element or body is fixed, but subsequent elements may move in front of the current element. I usually understand this as: the order of the current element and subsequent elements may change. .

3. (Current element's) position: fixed, similar to absolute, but does not change the position as the scroll bar moves (for example, some advertisements placed in the lower right corner of web pages, when the scroll bar is pulled down, the position of the advertisement is unchanged), when the browser is zoomed out so that this element is not visible, no scroll bars will appear on the page.

4. (Current element’s) position: static, default value.

The above is the positioning of the page layout I compiled for you. I hope it will be helpful to you in the future.

Related articles:

Detailed introduction to CSS page layout techniques

Detailed explanation of CSS basic knowledge points

jquery CSS3 implements drop-down navigation menu function

The above is the detailed content of Detailed interpretation of positioning in page layout. For more information, please follow other related articles on the PHP Chinese website!