Html – How to position an element in a specific point of a page responsively without losing my mind over media queries

The way to do this is by creating an SVG which contains both your image and its clickable areas (implemented as SVG shapes or paths). This ensures that both the image and its clickable areas will stay in sync as the SVG scales, stretches or crops.

Let’s start with the image. For this example, I’ve chosen an image from picsum.photos which contains three doors:

It’s image number 819, and I’ll scale it down to 1000 pixels wide:

http://picsum.photos/id/819/1000

The first step is to define an SVG <image> element to reference this, setting the width and height to match the intrinsic width and height of the image. This image happens to be square, so both width and height are 1000 pixels.

<image width="1000" height="1000" href="http://picsum.photos/id/819/1000"></image>

Then set the SVG viewbox to match.

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <image width="1000" height="1000" href="http://picsum.photos/id/819/1000"></image>
</svg>

Then define the clickable areas within this space. We can use any SVG shapes or paths to do this; in this case the doors are simple rectangles, so we can use <rect>. An SVG editing application can help make this step easy, particularly if you are needing more complex shapes for the clickable areas.

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <image width="1000" height="1000" href="http://picsum.photos/id/819/1000"></image>
  <rect x="242" y="673" width="133" height="187"/>
  <rect x="432" y="673" width="133" height="187"/>
  <rect x="621" y="673" width="133" height="187"/>
</svg>

Finally, we need to wrap each <rect> in an anchor <a> tag, so that we can use it as a link. Usually you would just set the href attribute to specify the link destination, but in this snippet I am using Javascript to trigger an alert box. Run it and tap on each of the three doors.

document.querySelector('.s1').addEventListener('click', evt => {
  if (evt.target.nodeName=='rect')
    alert(`door ${evt.target.closest('a').dataset.door} opened`)
})

.s1 {
  max-height: 90vh;
}

.s1 a {
  fill: transparent;
}

.s1 a:hover {
  fill: #fff7;
}

<svg class="s1" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

  <image width="1000" height="1000" href="http://picsum.photos/id/819/1000"></image>
 
  <a data-door="1">
    <rect x="242" y="673" width="133" height="187"/>
  </a>

  <a data-door="2">
    <rect x="432" y="673" width="133" height="187"/>
  </a>
  
  <a data-door="3">
    <rect x="621" y="673" width="133" height="187"/>
  </a>
</svg>

The final step is to make the SVG cover the viewport. With an image, this would be achieved by styling the image with object-fit and object-position, but these don’t work with inline SVG. Similar effects can be achieved using SVG’s preserveAspectRatio attribute; the following value is the equivalent of object-fit: cover combined with object-position: center bottom :

preserveAspectRatio="xMidYMax slice"

Here is a snippet to demonstrate the finished solution. After running it, use the full page link to properly test the responsive behaviour.

document.querySelector('.door').addEventListener('click', evt => {
  if (evt.target.nodeName=='rect')
    alert(`door ${evt.target.closest('a').dataset.door} opened`)
})

html, body, .door {
  height: 100%;
}

body {
  margin: 0;
}

.door {
  width: 100%;
}

.door a {
  fill: transparent;
}

.door a:hover {
  fill: #fff7;
}

<svg class="door" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax slice">

  <image width="1000" height="1000" href="http://picsum.photos/id/819/1000"></image>
 
  <a data-door="1">
    <rect x="242" y="673" width="133" height="187"/>
  </a>

  <a data-door="2">
    <rect x="432" y="673" width="133" height="187"/>
  </a>
  
  <a data-door="3">
    <rect x="621" y="673" width="133" height="187"/>
  </a>
</svg>

It’s also worth taking the ImageMapper website for a spin; it is a code generator which does the hard work for you with a sweet point-and-click interface.