> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/css/position-relative-vs-absolute.md).

# position: relative vs absolute

1. [<mark style="color:blue;">**What are Semantic elements in HTML?**</mark>](#user-content-fn-1)[^1]

Semantic HTML elements , are the element introduced mostly in HTML's version 5, HTML 5, to make it easy for the programmers to lay out the different sections of a web page using the semantic elements like `<header>, <footer> <nav> <section> <aside>` etc. instead of struggling with CSS to design these page layout elements using \<tables> or \<div> as web developers would do before HTML 5.&#x20;

But I feel with the advent of component driven javascript frameworks/libs like React or Angular, and CSS flex-box or frameworks like bootstrap, Material UI or tailwind , now it easy to  use \<div>s to design those  layout sections and we don't see programmers these Semantic HTML elements.&#x20;

One advantage of use of Semantic elements I could see is it would make the HTML code more readable, easy to understand compared to reading a bunch of nested \<div>s, but again, with components, you can split that big bunch of \<div>s to smaller components giving each component a meaningful, readable name, so I don't see any big advantage using Semantic elements, not yet.

2\. <mark style="color:blue;">**Difference between**</mark><mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**`position: relative`**</mark><mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**and**</mark><mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**`position: absolute`**</mark><mark style="color:blue;">**&#x20;**</mark><mark style="color:blue;">**in CSS?**</mark>

By default, an HTML element has  `position: static` value, which means:

the browser, when rendering an element on a web-page, would by default position it based on its current position according to the flow coded in the HTML and according to hierarchy of its parent element. The `top`, `right`, `bottom`, `left`and `z-index` properties do not apply.&#x20;

*<mark style="color:orange;">**position: relative**</mark>*

When we set the position *relative*, without adding any other positioning attributes (top, bottom, right, left) **nothing will happen**. \
When we add an additional positional value apart from `position:relative`, such as `left: 20px,`the element will move 20px to the right from its normal position. Here, you can see that **this element is positioned relative to it normal poistion**. When the element moves, no other element on the layout will be affected.

Thus when an element has a position value relative, the element will be moved to as per the values specified for left/right/bottom/right css props, **with reference to its own original/normal position**.

*<mark style="color:orange;">**position: absolute**</mark>*

When an element has a position value absolute, the element will be moved to as per the values specified for left/right/bottom/right css props, **with reference to its parent element's block scope**.&#x20;

Note - when we set `position:relative` of a block element (like div), then that div becomes the 'scope' or 'parent block' for any child elements with `position: absolute` to position them 'absolutely' within this parent block.

Thus, Absolute positioning is done **within the first relatively positioned parent element**. In the case when there is no relatively positioned parent element, the element will be positioned related **directly to the HTML element (the page itself)**.

<mark style="color:green;">\*POR=Point of Reference</mark>

<mark style="color:green;">\*LTRB values = CSS left/top/right/bottm prop values</mark>&#x20;

<table><thead><tr><th>Hierarchy and `position` value</th><th>Position</th><th data-hidden></th></tr></thead><tbody><tr><td><p><code>position: relative</code></p><p>Placed directly under body</p></td><td>The element would be positioned according to the left/top/right/bottm (LTRB) values specified <strong>with respect to its original position</strong> as POR. If none of LTRB values specified, no change in the position.</td><td></td></tr><tr><td><p><code>position: absolute</code></p><p>Placed directly under body</p></td><td>Positioned according to the LTRB values specified <strong>with respect to 'body'</strong> as POR. </td><td></td></tr><tr><td><p><code>position: relative</code></p><p>Placed  under an element with <code>position: absolute</code></p></td><td></td><td></td></tr><tr><td><p><code>position: absolute</code></p><p>Placed  under an element with <code>position: absolute</code></p></td><td></td><td></td></tr><tr><td><p><code>position: relative</code></p><p>Placed  under an element with <code>position: relative</code></p></td><td>The element would be positioned according to the LTRB values specified <strong>with respect to its original position</strong> as POR.</td><td></td></tr><tr><td><p><code>position: absolute</code></p><p>Placed  under an element with <code>position: relative</code></p></td><td>The element would be positioned according to the LTRB values specified <strong>with respect to its parent</strong> as POR.</td><td></td></tr></tbody></table>

{% embed url="<https://jsfiddle.net/tiwarib/6yv9wgs5/100/>" %}

[^1]: