Static, absolute, relative, fixed, sticky in position in CSS

The values ​​of static are static, absolute, relative, fixed, sticky

The default position value of the element in html is static,

static (html default positioning method)

Will move with the html layout (flow). static elements on the top, left, right, bottomthe set value will not take effect

absolute (absolute positioning)

The absolute element will not move with the html typesetting process, but it will 随着滚动条移动.
absolute element will be positioned according to the external elements
top, left, right, bottomis set as the value of the position of its elements.

relative (relative positioning)

Will move with the html layout (flow). relative elements on top, left, right, bottomsetting will take effect, so you can adjust the position by these four properties, and static bit like much but is adjusted by top other locations.
The absolute element within the relative element will be positioned according to the relative

fixed (fixed positioning)

The fixed element will be fixed at a fixed position on the page and will not move with the scroll bar.
If a fixed set of elements top, left, right, bottom. Even in relative, it will still be positioned based on the body, not based on the relative element

sticky

The sticky element will scroll with the page, but the sticky element can be attached to the top of the screen

.sticky{
    
    
	position:sticky;
	top:0;
	/*
	0是吸附到顶部，也就是这个是触发条件，
	如果设定为20px，则会在该元素顶部与该元素的位置为20px时会固定在改位置
	*/
}