How to implement the positioning of the tips regarding the elements in the pictures, taking into account Adaptivity http://prntscr.com/9h3sfw , here is a good example of what you need http://www.gt3themes.com/wordpress-themes/canvas/ how to implement, points can stand anywhere. Specify the position of points in percent did not give a normal result.

  • I think you need to understand how positioning position positioning works; and position: relative; And work with% relative to the width and height of the image. - AndrewRIGHT

1 answer 1

CSS:

html, body{ margin: 0; padding: 0; width: 100%; height: 100%; } .container{ width: 100%; position: absolute; left: 0; top: 0; } .container > img{ width: 100%; display: block; } .dot{ position: absolute; height: 10px; width: 10px; background-color: red; cursor: pointer; }

HTML:

 <div class="container"> <img src="http://s30.postimg.org/b2a7v9z41/kvartira5.gif"> <div class="dot" style="left: calc(35% - 5px); top: calc(50% - 5px);"></div> <div class="dot" style="left: calc(52% - 5px); top: calc(80% - 5px);"></div> <div class="dot" style="left: calc(80% - 5px); top: calc(35% - 5px);"></div> </div>

https://jsfiddle.net/Drabadur/tdfddfhj/1/embedded/result/

Apparently, you do not very well understand the principles of positioning. Read this: https://webref.ru/css/position

  • Yes, I understand everything, your calc method is not cross-browser, you just need percentages, I had more problem how to do it autonomously so that the user entered the points. The essence of positioning is clear. I've done everything. ATP for the answer - Karalahti