If an element has position:absolute, relative to which element will it be positioned? What if there is another absolute element inside?

When an element is given position: absolute, it is positioned relative to the nearest ancestor that has a positioning other than static (for example, relative, absolute, fixed, or sticky). If no such ancestor exists, the positioning is relative to the browser window (viewport).

If there is another element with position: absolute inside an absolutely positioned element, it will be positioned relative to the nearest ancestor with positioning, which could be that absolute element itself (if it has a positioning other than static).

Example:

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px;">
    <div style="position: absolute; top: 5px; left: 5px;">Nested absolute element</div>
  </div>
</div>

In this example, the nested absolute element is positioned relative to the nearest positioned ancestor — the outer absolute element.