This box is currently set to:

position: static;

The general rule for absolute positioning is that the parent of the element needs to be changed from the default position: static to either relative or absolute.

However when the parent isn’t set or set to the default value of static this does’t mean positon: absolute; in the child has no effect. In this case the positioning is set relative to the browser’s viewport. It’s similar to position: fixed; except that unlike fixed it will move when the page is scrolled.

This (green) box has the following CSS:

position: absolute;
bottom: 10px;
right: 10px;

Changing the position property of the parent (grey) element from static (the default) to relative changes how this element behaves.

See also position: sticky