How to prevent an element from changing its position like given in this code. Checkout code.

Question

https://code.sololearn.com/WXzQPlUl5rQd/?ref=app

Answer 1

Just remove position:absolute; from line 56 and 57. It's enabling overlapping.

Answer 2

Adil, there is still one issue!

Checkout first div and second div. First div is given absolute and the second is not.

Why the first div not overlapping over second div even though we are using absolute attribute in first div?

Answer 3

No Problem 😊
Always happy to help 🤠

Answer 4

Please use the tags "html" next time, it's much more meaninful.

Answer 5

Adil, as much i understand position absolute doesn't enable overlapping instead it removes them from flow. That's why the last <div> didn't postition down from the second last <div>. And overlapping is like normal feature of elements but static positioning or normal flow prevents it from happening.

And thanks cause your comment was helpful in finding my solution. I replaced position with margin.

Answer 6

Yup! You're right. That's what I meant.
Actually position absolute removes elements from their normal flow which results in overlapping.

That's my pleasure 🙌
It's nice that you've found the solution.

Happy Coding 🤠

Answer 7

You've set position absolute in div1 animation not in div1 entirely. Try setting it after line 3.

Answer 8

Finally i got it.
It was a complex code for me.
Giving absolute positioning in animation gave such a confusing result.
Thanks for your time

Answer 9

🤨what does that mean Chaverra McCallop?

Answer 10

Ok

Answer 11

Chad

Answer 12

It is better to use transform:translate( x, y) for such positioning

Answer 13

Hi
How arw dat