Understanding CSS Position Property

A question on the CSS position property. I have a hard time understanding position, so I thought I would finally conquer it so that website development it easier.

Absolute removes the content from the flow and bases its position on the body, unless a container in the body has absolute, meaning the lowest level element finds the highest element that has absolute and bases its position from that.

Relative keeps it flow as if it was still there and can be moved without affecting the other elements.

Am I getting that correct?

I would change

absolute -> relative.

An element with absolute position is placed inside of any first parent container that has position:relative declared. If none of its parents have relative position, then it’s positioned relative to body. And yes, that means it removes the content from the flow.

1 Like

Ok, that makes sense. I wouldn’t want to remove the container containing the element away from the flow. So, if I want an element to be out of the flow but, don’t what it absolute to the body, I would put position: relative to the container containing the element so the container stays with the flow with the document, and to keep the element inside the container.

Correct, you got it! :slight_smile:

1 Like