How to use positioning elements with different screen resolutions?

Good day!
The idea to make a page that represents a room. In this room there are table, window, PC, lamp etc.
Here's a visual example of the room - joxi.ru/nAyb3QPU355YrZ.jpg
Html code of the page - a standard bootstrap template. Its nothing I've added.
Css code of the page:
html, body{
 height: 100%;
}

body {
 background: #2C3E50 url(../images/background.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Want to make some elements of this room was clickable: clicking on the PC appeared a window with the same information, pulled the window - another action. For this you need to use a position: absolute coordinates. But if I for your screen resolution will be able to ask precise positioning, while other resolutions will be changes. Can you please tell me how to make proper positioning for any screen resolution?
July 9th 19 at 13:57

Related questions

More answers about "How to use positioning elements with different screen resolutions?"
3 answers
July 9th 19 at 13:59
Solution
If for one solution, I would do this:
tag_area
UPD#1: Find what you need: image-map-resizer
Hmm, great example! It turns out the coordinates in the tags area, I'll have to prescribe myself? - Arthur_McCullough70 commented on July 9th 19 at 14:02
Yes. I'd googled some generator - Kameron_Hilpert34 commented on July 9th 19 at 14:05
: thank you very much! Going to try :) - Arthur_McCullough70 commented on July 9th 19 at 14:08
: tell me, please, why I have a hidden area in the map tag? I look through the "examine element". - Arthur_McCullough70 commented on July 9th 19 at 14:11
July 9th 19 at 14:01
percentage
When different resolutions of the screen coordinates in percent vary. Isn't it? - Arthur_McCullough70 commented on July 9th 19 at 14:04
Then use the positioning on the parent, placing the container relative and absolute elements, and use media queries. Media queries just spelled out the container width for all resolutions. - Kameron_Hilpert34 commented on July 9th 19 at 14:07
: Yes, I was thinking in the direction of the media, but somehow gemorno it would be. Maybe there's an easier way? - Arthur_McCullough70 commented on July 9th 19 at 14:10
: If you have a site responsive, using media — the right solution, not a crutch. - Arthur_McCullough70 commented on July 9th 19 at 14:13
: then in the media queries need to strictly specify margins in pixels. Right? - Arthur_McCullough70 commented on July 9th 19 at 14:16
You can try to paste in the html code of images from a svg file and then positioning is not necessary. - verdie25 commented on July 9th 19 at 14:19
: how, then, clicks on elements? - Arthur_McCullough70 commented on July 9th 19 at 14:22
in the link wrap. svg — the same hml spelled with an inline css. - verdie25 commented on July 9th 19 at 14:25
July 9th 19 at 14:03
Generally, such things are done in SVG or canvas. But if you need it picture can be done through:
1. Relative scaling the clickable area overlaid on the picture.
At the same time - you can organize a "flashlight" or a border to the image, highlighting the object on which the cursor is put. Something like a 2D raycasting.

2. You can also create a layer under the layer ("cake") using z-index, cut into clickable pieces of pictures and pasting them in each layer with absolute INTEREST! offset inside of the container. Would be something like a segmented application, and in General get the same image with the desired functionality.
Doesn't quite fit. The option with the higher card is very well suited, as it is possible to link any form. - Arthur_McCullough70 commented on July 9th 19 at 14:06
: well, the standard map, Yes. but you can also have your areas to do with JS. or paragraph 2 - there's just links to images, as they will be positioned and superimposed on each other - these zones will appear to the machine.
(here, in principle, any of the 3 methods has the right to life) - Kameron_Hilpert34 commented on July 9th 19 at 14:09
: I started to use a method with a map (using and ). Faced with this problem: press the "examine element", and I somehow they seem to hide all the tags . What could be the problem? - Arthur_McCullough70 commented on July 9th 19 at 14:12
although there. Variant with a map not really suited to that. I download online generator the picture (and it is high resolution), get the coordinates (large, respectively). Use the css code that is above. It turns out that each user has a different screen resolution. And it turns out that those coordinates do not suit him. In that case to do? - Arthur_McCullough70 commented on July 9th 19 at 14:15
: JS should dynamically after loading to replace the click-map-coordinates based on the current size of the page. - Arthur_McCullough70 commented on July 9th 19 at 14:18
: can you please a code example to show/write? I'm really bad at it. - verdie25 commented on July 9th 19 at 14:21
: I don't work with map clicks, so I need this time to penetrate. - Arthur_McCullough70 commented on July 9th 19 at 14:24

Find more questions by tags CSSJavaScriptHTMLjQuery