Sorry, the thorough explanation I had in memory was posted here in this forum some months ago but apparently not in a thread by you. Sad to hear you were met with insults, that isn’t the SO I know, I hope you flagged their posts.
Did my answer clarify why the div behaved differently given a relative position instead of the absolute?
If you change both to relative then as the co-ordinates are zero that means the elements have not been moved at all and will just occupy space in the logical normal flow of the document one after the other and will not overlap.
If you change only one element to relative then the elements may or may not overlap but it will depend where the closest positioned ancestor lies (either relative or absolute). If none exists then the absolute co-ordinates are taken from the root element which may or may not be where your relative element is resisiding and thus will depend whether they overlap or not. Generally the root element (html) has margin/padding applied by default so if you only have two elements on the page then the relative element will not be flush to the viewport edge but the absolute element will.
You can read more about relative positioning in the following thread.