An absolute element's location changes with respect to its parent element. This works only if the parent element has its own position set to a value other than static.
If this is not so, the absolute element looks for the nearest parent whose position is set to a value other than static. If no such parent element is found, its location changes with respect to the body itself:
In the above code, we can observe
that the element with id absolute
appears at the top
and
right position of the root element,
which is body.
Try uncommenting position: relative
from the element with parent-container id
and
notice that the location of element with
id absolute changes with respect to
parent-container.
Similarly, uncomment the position: relative
from the element with outer-container
and
notice that the location of element with
id absolute changes with respect to
outer-container.