Go with the flow!
One concept that will help with positioning elements in a responsive and responsible manner is to always place elements so that you do not disrupt the flow of the page.
It may seem strange to talk about “flow” in terms of a web page but what we are referring to is the fact that content can flow from top to bottom easily and without restriction.
Imagine if you have two paragraphs of text on the page and nothing else and no styling. If you resize the browser window the text flows and adapts as required without any effort on your behalf. You can even add another paragraph, add or remove words and the page still works and the content flows up and down without restriction.
Now imagine if the first paragraph was absolutely placed at the top of the page and the second paragraph was absolutely placed at 100px from the top (because that’s how high you think the paragraph is). If you resize the browser window now or add more content to the first paragraph the page no longer has a flow and everything stays where it was placed except now the content overflows and obscures other content that is in the way. We have now lost the flow of the page and in order to add more elements we would need to make a guess with magic numbers as to where content could reside but we would ultimately fail.
Beginners often fall into the ‘absolute trap’ because its something they can understand easily (e.g. 10px from top and 10px from the left) but in doing so immediately create a problem that cannot be rectified.
Absolute positioning is fine as long as it does not disrupt the flow and that means when you absolutely place something it must live in a place where it will do no harm and not interrupt the flow of the rest of the page.
In most cases you simply want elements to follow logically one after the after (no positioning or fixed heights are needed) and in that way you can add or remove content anywhere and not need to re-style every other element on the page as you would if it was all absolutely placed.
When laying out a web page you need to use properties that maintain the flow of the page and indeed that is mostly anything except absolute/fixed or relative positioning. For most other properties (even floats) you can control the flow of the page and let content flow logically from one to the next. You can space content with margins or align horizontally with floats, display:inline-block, display:table-cell, flexbox etc and still maintain the flow of the page.
Lastly, a quick word on ‘heights’ (of which we will probably talk more about later). As a general rule don’t set fixed heights on your containers if they contain fluid content like text. The reason for this is that fixed heights mean an element cannot grow past that point (unless it has the property/value of display:table) and once again you break the flow of the page.