This green paragraph with a margin of 3em is a child of the body element. The absolutely positioned red element is rendered as expected by the humble author.
position:absolute; top:1em; left:1em.
Put both elements inside a container div with position:relative and margin:1em auto (and a yellow background) in order to center them horizontally. Note that the yellow background of the container is vertically cropped to the margins of the green static child element, and the reference point for the positioning is moved vertically down.
position:absolute; top:1em; left:1em.
Add a border to the parent container, and the yellow background now fills the whole container, and the reference point for vertical positioning is moved back up to zero - which re-establishes the rendering that the humble author would intuitively expect.
position:absolute; top:1em; left:1em.