How to properly use relative/absolute in css?

Question

css

I want to understand how to use a combo of relative and absolute. I've heard that you should give the parent element position: relative; and the nested element absolute.

I have a question what to do if I want to create a template like this:
https://jsfiddle.net/z9mw3sn2/

There are three blocks here - #page, .navbar, .nav-items, each of which is nested in the previous block. What should I do, give the first two relative? Or give the last two absolute, because one person said that an absolute block nested in another absolute block is a perversion, while I saw an example on the Internet where they used this practice. I tried to give the first two blocks relative, but they just don't work, I gave them the width and height as a percentage and set the background color, but they are not displayed. What if I have a lot of nested blocks? What if there are 3-4-5-...? They probably try to avoid such a large number, but in what way and yet what if they have to be used?

Answer 1

The question is not correct, the exact task and purpose of use is not described, but only theory and the lack of experience of the TS.

How to properly use relative/absolute in css?

By appointment.