The position property basically just tells the element how it should position itself on the page and in relation to other elements.
If you add a bunch of elements to a page you'll notice by default those elements will either sit next to each other or below each other depending on if they're inline or block elements, and they'll do so respecting the order you added them to the page. They will never sit on top of each other by default. This is basically what we're talking about when we refer to the "flow layout", or "flow of the document" as your teacher says - it's just the default way elements are arranged and displayed on the page.
However, there are times when you might want to be more explicit... For example a dropdown menu would typically sit on top of elements below it. To achieve this we need to apply explicit positioning rules to element so it doesn't follow the default flow layout rules.
One of those position rules is `position: absolute` which allows you to explicitly define where the element should be positioned relative to its container. That means with position absolute applied elements can sit on top of each other which is what I think we're probably seeing in your example.
`position: static` is just the default and will position the element based on the standard flow layout rules. My guess is that when you're applying `position: static`, you're actually removing a `position: absolute` rule and therefore defaulting back to the flow layout. That's why the elements stop sitting on top of each other when you apply `position: static`.
Honestly CSS is just confusing as hell. There are so many weird rules which you'll need to learn. It just takes time to absorb everything mentally.