Please any one can explain position property in css

Question

I have no idea when to use absolute position ,when to use relative position and why we use position property I have seen lots of videos but still I am not able to understand 😔😞😔

Answer 1

https://code.sololearn.com/W08Nc710ZvJQ/?ref=app
https://code.sololearn.com/WUH8radhjg9I/?ref=app

Answer 2

Ok first u need to understand the flow of elements placing..
When u add something like:
<h1> Hello World</h1>
<p> some text</p>

What it does is it places element one after the other since they are block k level elements.. that means elements are stacked in order of the code written

But when you want some element to move out of the flow Theni use position properties..

i) position : absolute

Case a) when the element is set to absolute position.

In this case the element get relative to the body element that is when u change position like top:0 left:0 the element will move to the top left corner of the document irrespective of other elements..
Because this element is now not in the document flow..

Case b ) when the element is absolute but its parent element is relative

In this case when you change top:0 left:0 the element is again out of the document flow but still within the parent element so it will just be moved within the relative parent element unless you provide negative values (part -1)

Answer 3

Hope it helps!!

Answer 4

Plz can you explain in your own words instead of code @Sami khana

Answer 5

(part-2) continued ...
..or offset values to the absolute element.

ii) position : relative

This type of element positioning will not leave the document workflow but still it will provide access to move it within its flow and the space which it had taken in the workflow will remain there as it is.. I will explain this with an example.. wait..

Answer 6

Thanks 😘☺️

Answer 7

https://code.sololearn.com/WXN15FHzNM2C/?ref=app
In this code see the box2 html code it is written after the box 1 code..
And in the output it is displaced to 400px from its initial position.. because in css I have used position:relative and top to 400px. here this element is relative to its original position and from there it is shifted to 400px down and
***note that it's original place is still present in document flow..