Why does the child element absolute cause positioning changes when the parent element is relative?

I set the parent element to relative and the child element position to absolute positioning, but why does the font position change relative to the background when I zoom in and out? In the screenshot below, you can see the zoom in and out of the page, and the position of the font relative to the picture has changed obviously. The code is shown in figure 3
after the page is enlarged
clipboard.png

clipboard.png
]
CSS

clipboard.png
html

clipboard.png

.
Mar.04,2021

in the process of zooming in and out, the font does not change, and the relative position of course changes

.
Menu