# 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]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bharat-tiwari.gitbook.io/our-tech-journal/css/position-relative-vs-absolute.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.