Can anyone Explain me the Position Property in Html/Css?

Question

I cant understand the difference between values fixed, relative, absolute and static. Their relation with z-index also confuses me.Anyone?

Answer 1

the most used in web site is position: fixed, for the scrollbar in the up of the page ^^
else you can use absolute, relative static

Answer 2

Static: default position. Elements in the flow just get stacked one below other.

relative and absolute: usually an element with position absolute will be positioned relatively to its parent. If none of its parents has a relative position, then the element is positioned relatively to the body.

Fixed: the element is removed from the flow and positioned relatively to the window (typically, it's going to follow the scroll)

z-index will only works with fixed, relative and absolute position. It is useful when elements are overlapping to determine which one is on top of the other.

Answer 3

https://www.w3schools.com/Css/css_positioning.asp

static is the default position.

fixed positions the element in relation to the displayed viewport, unaffected by scrolling

absolute positions the element in relation to a positioned element that it is inside of

relative positions an element based on it's original location

z-index is used to arrange positioned elements that are overlapping into a particular order