CSS Position

Question

I just want to confirm my understanding of different positions, especially relative and absolute.

For relative, if I made a paragraph element, relative will allow me to move the element from it's original position i.e move it from where it was placed initially. Also if moved, surrounding elements won't be affected and won't adjust to fill in the space the element would have left?

For absolute, if I had a paragraph element inside a table or div element. It's like the position fixed, but in a fixed position inside the bigger element, not the web page that we see on our screens. But if moved to a new position, elements would be adjusted and would try to fill in the space left behind by the paragraph element?

Answer 1

We only use absolute position with relative parent.
If there is no relative parent, we use fixed to relocate the element.

Answer 2

https://code.sololearn.com/WNrAqPm0nhW9/?ref=app

Answer 3

For relative, you are right. element could be relocated with top and left selector, but other elements still treating the relative element occupies the origin location.

For absolute, there is no difference compare to fixed element, except that if the absolute element has a parent element with relative position, where the top and left selector position would refer from the point of the parent element. Whereas fixed position element always refer to the origin 0,0 point even there is a parent element with relative position.

Other surrounding elements would treat fixed and absolute elements like they do not exist there at all.