Why set position relative when is not necessary - html

Question

I see a lot of sites setting the position: relative; in block elements when they won't use position in inner elements. Is there any other reason to set the position relative?
Example:
<div class="parent">
<div class="parent__container">
other elements here.
</div>
</div>
.parent {
background-color: blue;
}
.parent__container {
position: relative;
// etc
}
And the inner elements are not making any usage of position, sometimes i even see the .parent with position: relative; set.
This is very very common, i can point several sites that are setting the position without any necessaty (at least i think).
Thanks.

Answer 1

There is basically 3 reasons why one set an element to position: relative
To re-position the element itself, i.e. top: 20px
To use z-index on that element. A side effect, if one does not set a z-index, it will still position itself on top of statically positioned elements.
Limit the scope of absolutely positioned child elements, so a child of the relatively positioned element can be absolutely positioned within that block.
Here is an old article that describes the difference between the most used position values:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

Most websites these days use "relative" positioning to make their websites flexible and compatible with small-screen devices such as smart phones, and non-16x9-conforming devices. The original purpose of using relative over absolute positioning was to allow the programmer to allow the web-page to handle the positioning based on hierarchical order unless otherwise stated by the programmer.
Edit: Note that by defining "relative", it gives an element and its children a certain hierarchical order in the DOM model; it does not necessarily tell an element how to position itself (aka knowing to be aligned left or right), but rather creates a "box" or "container" in which an element and its children are given certain hierarchical order based on its nesting within HTML that the HTML document as a whole must conform to. In other words, "relative" defines the priority/hierarchy of an element in terms of its parents.
Conversely, if a programmer wanted to make certain elements staticly positioned, they would use "position: absolute;" to make that element static, relative to its parent. For example:
<div class="parentA">ParentA Text
<div class="childA">
All elements become positioned absolutely, requiring defined positions using margins, alginment and etc. Note that this may or may not be inherited depending on the browser and the code.
</div>
</div>
<div class="parentB">ParentB Text
<div class="childB">
All elements become positioned relatively, requiring no defined positions using margins, alginment and etc, unless desired. This makes the webpage very flexible (dynamic in the position of its elements).
</div>
</div>
<div class="parentC">ParentC Text
<div class="childC">
All elements in and under childC become positioned absolutely relative to parentC, requiring defined positions using margins, alginment and etc.
<div class="grandChildC">
Grandchild
</div>
</div>
</div>
<style>
.parentA {
position: absolute;
}
.parentB {
position: relative;
}
.parentC {
margin: 60px;
}
.childC {
position: absolute;
}
</style>
As seen in the above, since parentB is relative, it starts wherever parentA left off. Since parent A has no size and is defined as an absolute/static object, the two divs overlap. Conversely, since partentC is relative and childC is absolute, childC will move to wherever parentC is, however, its outline will remain static and on top of other elements, that is, static relative to the position of parentC.
I hope that this answers your question. If not, be more clearer in what you are trying to ask.