The hero had one floating element: a small legend explaining the map colours, pinned to the bottom-left corner over the map panel. It looked correct for months.
Then we replaced the hero screenshot with a real capture, and the legend ended up sitting on top of the phone, over its own bottom bar.
Nothing was positioned wrong
The legend was exactly where it had always been. What changed was the image. The new capture was taller for the same width than the old mock, so the phone grew by about fifty pixels and reached down into the corner the legend occupied.
A layout that assumes a fixed content size is really a layout that assumes a fixed image.
Absolute positioning hides the assumption until the content changes.
Flow over luck
The fix was to stop floating the legend. It became an ordinary element in a vertical stack under the phone, aligned to the left inside the panel. The panel is a flex column, so its height follows its content and the background fills whatever height that produces.
Now the legend cannot overlap the phone, at any viewport, with any screenshot. It does not need to know how tall the image is.
The general rule
If two things must never overlap, do not give one of them a fixed corner. Put them in a flow and let one push the other. Positioning is for things that should be independent; a legend and the image it explains are not.
It is a small bug with a boring fix, and that is usually what responsive really costs: not clever tricks, just removing assumptions that used to be invisible.