difference between position: relative; and position: absolute; in CSS?

Question

Ashutosh Kumar Verma · Answer

position: relative; positions an element relative to its normal position in the document flow. It does not affect the layout of surrounding elements, but it can be moved using the top, right, bottom, or left properties. However, the element still occupies its original position in the flow.
position: absolute; removes the element from the normal document flow and positions it relative to its closest positioned ancestor (an ancestor element with a position other than static). If no such ancestor exists, it will be positioned relative to the initial containing block (usually the andlt;html> element).
and 
Interaction
A relatively positioned element will affect the layout of other elements as it remains in the document flow.An absolutely positioned element will overlap other elements without pushing them apart as it is moved out of the flow.
Example-
.relative-box {
 position: relative;
 top: 20px;
 left: 10px;
}
.absolute-box {
 position: absolute;
 top: 50px;
 left: 100px;
}
and 
Also, Read: How can you center an element horizontally in CSS?

interview

difference between position: relative; and position: absolute; in CSS?

Ashutosh Kumar Verma

1 Answers

Liked By