What are the functions of the several attributes of position?

The four common attribute values ​​​​of position: relative, absolute, fixed, static. Generally used in conjunction with the "left", "top", "right" and "bottom" attributes.

Let’s explain it in detail:

static: default location

Under normal circumstances, we don’t need to declare it specifically, but Sometimes when encountering inheritance, we don't want to see the attributes inherited by the element affect itself, so we can use Position:static to cancel the inheritance, that is, to restore the default value of the element's positioning. An element set to static will always be at the position given by the page flow (static elements ignore any top, bottom, left or right declarations). uncommonly used.

relative: Relative positioning

Relative positioning is relative to the default position of the element. Its offset top, right, bottom, and left values ​​are all based on it. The original position is the base offset, regardless of what happens to other elements. Note that the relative moved element still occupies space in its original position.

absolute: Absolute positioning

An element set to absolute, if its parent container sets the position attribute, and the position attribute value is absolute or relative, then It will be offset based on the parent container. If its parent container does not set the position property, the offset is based on body. Note that elements with the absolute attribute set do not occupy a position in the standard flow.

fixed: fixed positioning

Elements whose position is set to fixed can be positioned at specified coordinates relative to the browser window. The element will stay in that position whether the window is scrolled or not. It is always based on body. Note that elements with the fixed attribute set do not occupy a position in the standard flow.

Recommended tutorial: css quick start

The above is the detailed content of What are the functions of the several attributes of position?. For more information, please follow other related articles on the PHP Chinese website!