...absolute
We can use the position
property to set an element in a desired location in the page,
by additionally specifying a horizontal and vertical position using the properties left, right,
top
, and bottom
. These properties specify the distance (in pixels or some other
units) from the (0,0)
coordinates of some reference container. Usually, the reference
container is the viewport (top-left corner of the browser viewing area).
...relative
To use position: relative
, you need to know "relative to what?"
Which element will act as (0,0) for this element? Set that element as position: absolute
and then set your element as position: relative
and set the coordinates.
...fixed
position: fixed
is very similar to the absolute one, with the difference that the element
remains in its position all the time, while the rest of the page scrolls up and down.