Learn HTML5

Positioning Elements:

The key point for position values
(static, relative, absolute, fixed, sticky) is the reference which the element uses to move toward or away (top/bottom/left/right) from it.

1- Static ---> keep the element in normal flow of html file (default)

2- relative---> there reference point is it's origin place in the html file

3- absolute--->the reference point is the closest parent element with (relative/fixed/absolute) postion , parent elements with static position cant be it's reference point... if there's no such element it's reference will be the html element.

4- fixed---> the reference point here is the view port (certain coordinate on your window) and since your screen don't move when you scroll so the element too will not move (fixed).

5- sticky---> it's a mix of relative and fixed position where your reference point is certain point on your window (view port) also you can move away from it but only in one direction.

Note: reference point is the point which the element use to move relatively to it.