What is difference between position absolute & relative ?And whats wrong with this code ?? [ Solved ]

Question

https://code.sololearn.com/WGbD0RtXM29A/?ref=app
https://code.sololearn.com/WI6u6yHc47Y6/?ref=app

In this code if we put the % value for height & width in position relative box it doesnt work , and if we put pixel value it work , why ??

Answer 1

Dê@d👋🏻🎭 ( Deactivated ) % doesn't work because box1's dimensions depend on their parent element's dimensions (body) which you have not specified.
Body element can take as much height and width as specified, or it will keep adding the dimensions until where the last specified element is visible.
I believe what you want to archive can be solved by using viewport-height(vh) and viewport-width(vw)

Answer 2

🇮🇳Vivek🇮🇳 and whats wrong with the code why % value not working 🙁

Answer 3

position relative means elements position will always be relative to its parent element.

absolute position means the position of elements will be relative to Window objects. This is very handy when we create modal.

Answer 4

Dê@d👋🏻🎭 ( Deactivated ) you are setting height and width not position of any element. Try “top, right, left, bottom”

height : 10% means 10% of height of html document.
Same for width.

Answer 5

Dê@d👋🏻🎭 ( Deactivated ) the difference between position relative and absolute is:
Relative: will make the elements appear as static(default) until you specify how far from the top and left it should move in association with its axis. It gives you a choice of not using margin.

Absolute: the element will act as if other sibling elements are not there. It will position its self in correspondence to the last element with a position property (usually its parent and siblings if any).But if the position is not specified in its parent element, it will position its self in correspondence to the body element. From there you can specify how further from left or top you want the element to move.