CSS's Position property

This article is mainly for you to share a CSS position properties, with a good reference value, I hope to be helpful to everyone. Follow the small series together to see it.

(1), Static
You can think of static, the default element is static positioning, the object follows the regular flow. At this point the 4 positioning offset properties are not applied, i.e. using left,right,bottom,top will not take effect.

(2), relative
Relative positioning, the object follows a regular flow, and the reference to its position in the regular stream is offset by top,right,bottom,left these 4 positioning offset properties without affecting any elements in the regular flow.

(3), Absolute
A, absolute positioning, the object is separated from the regular flow, at this time the Offset property refers to the nearest position of the ancestor element, if there is no location of the ancestor element, it has been traced back to the BODY element. The offset position of the box does not affect any element in the regular flow, and its margin is not collapsed with any other margin.

b, the element positioning refers to the nearest position of the ancestor element, to meet two conditions, the first is its own ancestor element, can be a parent element can also be the parent element of the parent element, always look for, if not, select Body as the control object. The second condition is that the ancestor element must be positioned, and popularly said that the property value of position is non-static.

(4), fixed
Fixed positioning, consistent with absolute, but offset positioning is a window for reference. When the scroll bar appears, the object does not scroll along.

(5), center
Consistent with absolute, but offset positioning is a reference to locating the center point of the ancestor element. The box is centered vertically horizontally in its containing container. (CSS3)

(6), page
Consistent with absolute. element within a paged media or area block, the element's containing block is always the initial containing block, otherwise it depends on each absolute mode. (CSS3)

(7), sticky
Objects follow normal flow when they are normal. It is like a relative and a fixed fit, when on the screen in the regular flow layout, when scrolling out of the screen when the performance as fixed. The performance of this property is the adsorption effect you see in reality. (CSS3)

Related recommendations:

Position properties in CSS

Css:position Property

Meaning of the Position property in CSS