Why we use position:relative here?

HTML-CSS Conversations
#1

.animation3 {
height: 200px;
width: 300px;
background-color: green;
margin: 100px;
border: 5px solid purple;
animation-name: example3;
animation-duration: 6s;
animation-iteration-count: infinite;
position: relative;
}

@keyframes example3{
0%{
left: 0px; top: 0px;
}
25%{
left: 200px; top: 0px;
}
50%{
left: 200px; top: 200px;
}
75%{
left: 0px; top: 200px;
}
100%{
left: 0px; top: 0px;
}
}

1 Like
#2

Hi Amar Agarwal, thank you for such a good question! We’ll get back to you with a solution shortly.

#3

@Amaragarwal7
position: relative places an element relative to its current position without changing the layout around it.

1 Like
#4

@Amaragarwal7
An element with “position: relative;” is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. just like we use transform translate property through x-axis, y-axis we can use position relative property as well in the place of that in animation , its just a another way of showing you the translate property by using position relative and without using translate property of transform.
Hope u understand better from this and get better idea .

2 Likes