Positioning of elements, the problem is in the overlay of layers, how to solve?

Question

css

i.e. girl, this is the background image in the div and position : relative. White dots, links applied in position: absolute.
When you click on one of the points, a strip with information opens (you can see it on the screen). A stripe is a transparent picture with a stripe itself (and so on for each element).
The problem is that if, for example, I click on a point that is located on the leg, and then I want to click on a point on the thigh, then I can’t, because the picture (pointer) from the leg overlaps other points that are in that area .
How can I solve this problem?

Answer 1

When you click not on the dot - hide everything. And in a good way - you need to make up so that it does not overlap.

Answer 2

Maybe z-index would help?

Answer 3

White dots need to be given a larger z-index than the emerging stripe, then it will not bother you.