How do you position markers on top of an image responsively, so that when the image is resized, the markers stay in place?
I refer to this technique as relative-absolute positioning, and it involves a particular characteristic of how CSS positioning works.
Position the outer frame as relative
Position the inner markers as absolute
... and the markers will be absolutely positioned within the relative parent.
If you want to prevent the markers from interfering with mouse clicks and user interactions with the underlying element, you can apply CSS's pointer-events: none property.
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
