Responsive page with html and css

I want to be more comfortable using position absolute or relative. I was under the impression that for layout flex and grid are the way to go but in looking at other code, I notice that absolute and relative still play a big role. I'm just not sure when to use them.

For instance, in some code I was reading, there was a ul, with a bunch of li's. The list-items also had a variety of html elements (a, spans, etc). Body was set to flex and the ul was properly placed as its child. The UL also had 'position: absolute' . When I turned off that property, the UL stays as a flex child but all the LI's and their descendants were outside the flex box.