How to lay out such markers?

Question

css

How to correctly and adaptively lay out such markers on top of the image?
I think through position: absolute, but it's interesting that someone has other thoughts

Answer 1

using position: absolute will not work adaptively, it will run into each other or you will have to set a million breakpoints. better svg

Answer 2

it is possible through ul > li, give ul - position absolute, and li position relative