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.
![](https://assets.sygnal.com/https://cdn.prod.website-files.com/59b8d49f7fdf9700017d783a/6375b54dd861994d718f1f88_SNGOUT2116.png)
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.
This also works with video.
- See Mike Yelvin's post
- See a demonstration - CSS Tricks
Demonstration Project
Check out these links to explore the demo project.
Notes
- Master Absolute Positioning - Vincent Bidaux