Why doesn't element go through to the top of the parent even though it setted absolute top: 0;?

Solution

When we do that most of time the element goes to the top of the page. But why?

When we write...

.element{
  position: absolute;
}

...it won't happen.

But when we add top: 0;

.element {
  position: absolute;
  top: 0;
}

It'll continue until it finds a parent element that setted as position: relative;. So we should limit the element.

.parent {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
}

Sources

I came across with this information on a video (second: 1:53:35)
Channel: Coder Coder

You can also look: https://stackoverflow.com/questions/3830486/absolute-position-is-not-working

And if you want learn more about positions in CSS you should take a look that:
CSS-Tricks.com position