position: relative vs absolute
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.
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.
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. Difference between position: relative and position: absolute in CSS?
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, leftand z-index properties do not apply.
position: relative
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.
position: absolute
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.
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).
*POR=Point of Reference
*LTRB values = CSS left/top/right/bottm prop values
position: relative
Placed directly under body
The element would be positioned according to the left/top/right/bottm (LTRB) values specified with respect to its original position as POR. If none of LTRB values specified, no change in the position.
position: absolute
Placed directly under body
Positioned according to the LTRB values specified with respect to 'body' as POR.
position: relative
Placed under an element with position: absolute
position: absolute
Placed under an element with position: absolute
position: relative
Placed under an element with position: relative
The element would be positioned according to the LTRB values specified with respect to its original position as POR.
position: absolute
Placed under an element with position: relative
The element would be positioned according to the LTRB values specified with respect to its parent as POR.
Last updated
