static is the default position. it's not affected by top, bottom, left, and right, and is not positioned in any special way.
sticky will scroll until it reaches a certain position specified with top, bottom, left, or right, and then stick in that position thereafter.
relative position will move the elements relative to it's normal position. top, bottom, left, and right will change which way it's adjusted away from it's normal position. other content is not adjusted to fit into any gap left by the
element.
top: 100px
left: 200px
absolute when positioned inside of a div will remain relative to the div.
static. this is to show that the position of other things are not affected by the relative position changing.
absolute positions itself relative to the veirport when it's scrolled at the top of the page. top, bottom, left, and right decide where it is on the screen. when you scroll, it scrolls with the screen.
fixed will keep the same position on the page, even when you scroll. use top, bottom, left, and right to say how far it is from the edge of the pages.
center using abolute