CSS position attribute

This article mainly shares with you an article about the position attribute of CSS. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.

(1), static
can be considered static, the default elements are statically positioned, and the objects follow the regular flow. At this time, the four positioning offset attributes will not be applied, that is, using left, right, bottom, and top will not take effect.

(2), relative
Relative positioning, the object follows the regular flow, and refers to its position in the regular flow through top, right, bottom, left. The positioning offset property is offset without affecting any elements in the regular flow.

(3), absolute
a. Absolute positioning, the object breaks away from the regular flow. At this time, the offset attribute refers to the positioned ancestor element closest to itself. If If there is no positioned ancestor element, it will always go back to the body element. The box's offset position does not affect any elements in the regular flow, and its margins are not collapsed with any other margins.

b. Element positioning refers to the positioning ancestor element closest to itself. It must meet two conditions. The first is its own ancestor element, which can be the parent element or the parent of the parent element. Element, keep looking, if not, select body as the comparison object. The second condition is that the ancestor element must be positioned. In layman's terms, it doesn't matter if the attribute value of position is non-static.

(4), fixed
Fixed positioning, consistent with absolute, but offset positioning is based on the window. When scroll bars appear, the object does not scroll.

(5), center
is consistent with absolute, but the offset positioning is based on the center point of the ancestor element as a reference. The box is centered vertically and horizontally within its containing container. (CSS3)

(6), page
is consistent with absolute. When an element is within a paginated media or region block, the element's containing block is always the initial containing block, otherwise it depends on each absolute mode. (CSS3)

(7), sticky
The object follows the normal flow in normal state. It is like a combination of relative and fixed. When it is in the screen, it is typed according to the normal flow. When it is scrolled out of the screen, it behaves like fixed. The performance of this attribute is the adsorption effect you see in reality. (CSS3)

##Related recommendations:

CSS position attribute

css:position attribute

The meaning of the Position attribute in Css

The above is the detailed content of CSS position attribute. For more information, please follow other related articles on the PHP Chinese website!