There are many position value used in Css, some of them are relative, static, absolute fixed etc.
in this tutorial, we would be taking a look at the difference between position relative and absolute. One thing we should know is that relative and absolute positioning are two different CSS positioning techniques. They are used to position elements on a web page and here are the differences between them:
1. Relative Positioning:
- Relative positioning is the default positioning behavior of elements.
- When an element is positioned relatively (position: relative;), it is still within the normal document flow. This means it still occupies its original space in the layout.
- Relative positioning allows you to adjust the position of an element relative to its normal position using the top, bottom, left, and right properties.
- Other elements on the page are not affected by the relative positioning of an element. They will continue to occupy their original positions.
- Relative positioning is often used in combination with absolute or fixed positioning to create complex layouts.
2. Absolute Positioning:
- When an element is positioned absolutely (position: absolute;), it is taken out of the normal document flow and positioned relative to its closest positioned ancestor(parent). If the there is no relative positioned parent, the initial containing block (usually the <body> element) becomes the parent since all the elements are placed in the body.
- Absolute positioning allows you to precisely position an element using the top, bottom, left, and right properties.
- Absolute positioned elements are not affected by other elements, and other elements are not affected by them. They can overlap other elements or leave gaps in the layout.
- When using absolute positioning, it’s important to consider the context and ensure that the relative positioned ancestor(parent) is correctly defined to achieve the desired positioning.
Summary
Relative positioning adjusts the position of an element relative to its normal position while still affecting the layout of other elements.
Absolute positioning completely removes the element from the normal flow and positions it relative to its closest relative positioned ancestor or the initial containing block which is the body, without affecting other elements’ positions.
We would an example to illustrate how this two differs
Example to show the differences between position absolute and relative
Html
<body>
<div class="absolute"></div>
<div class="relative"></div>
</body>
Css
body {
background-color: tomato;
}
.relative {
width: 200px;
background-color: black;
height: 100px;
}
.absolute {
position: absolute;
width: 100px;
top: 20%;
left: 10%;
background-color: white;
height: 50px;
}
Result
Notice that the element with a white background is position absolute, but since it doesn’t have a parent element which is positioned relative, it is then positioned to the relative to the body.
You can also learn the differences between inline element and block level element
Next we are going to place the element with white background within the element with black background.
Html
<body>
<div class="relative">
<div class="absolute"></div>
</div>
</body>
CSS
body {
background-color: tomato;
}
.relative {
width: 200px;
background-color: black;
height: 100px;
position: relative;
}
.absolute {
position: absolute;
width: 100px;
top: 20%;
left: 10%;
background-color: white;
height: 50px;
}
This time around, we set the position value of the element with black background to be relative
By doing so, the element with white background is positioned absolute to the parent which has a black background.
Notice the difference: When absolute position element has no close ancestor which is position relative, it will be positioned absolute to the body.
Result
This is a very simple example on about which shows the difference between position absolute and relative
Pingback: The Differences Between Inline and Block Elements in Html - codeharis