Nowadays, the majority of websites utilize "relative" positioning to ensure flexibility and compatibility with various screen sizes, including small-screen devices like smartphones and non-16x9-conforming devices. The initial reason for choosing relative positioning over absolute positioning was to give the programmer the ability to let the web page handle positioning based on hierarchical order unless specified otherwise.
Update: It's important to note that defining "relative" assigns a certain hierarchical order to an element and its children in the DOM model. It doesn't determine the specific positioning of an element (such as aligning left or right), but rather establishes a "box" or "container" where the element and its children are structured hierarchically based on their nesting within the HTML, which the entire HTML document must adhere to. Essentially, "relative" sets the priority/hierarchy of an element in relation to its parents.
On the other hand, if a programmer wants certain elements to be statically positioned, they would use "position: absolute;" to make that element static in relation to its parent. For example:
<div class="parentA">ParentA Text
<div class="childA">
All elements are placed absolutely, requiring specific positions using margins, alignment, etc. This behavior may or may not be inherited depending on the browser and code structure.
</div>
</div>
<div class="parentB">ParentB Text
<div class="childB">
All elements are placed relatively, not needing specific positions using margins, alignment, etc., unless desired. This enhances the webpage's flexibility in element positioning.
</div>
</div>
<div class="parentC">ParentC Text
<div class="childC">
All elements within and under childC are positioned absolutely in relation to parentC, necessitating defined positions using margins, alignment, etc.
<div class="grandChildC">
Grandchild
</div>
</div>
</div>
<style>
.parentA {
position: absolute;
}
.parentB {
position: relative;
}
.parentC {
margin: 60px;
}
.childC {
position: absolute;
}
</style>
As illustrated above, because parentB is relative, it picks up where parentA left off. As parent A has no size and is defined as an absolute/static object, the two divs overlap. Conversely, since parentC is relative and childC is absolute, childC will align with parentC's position, but its layout will remain static and on top of other elements, maintaining a fixed position relative to parentC.
I trust that this explanation addresses your inquiry. If not, please clarify your question further.