title: Div above responsive image map
body: <p>I am trying to add an arrow over a image that has an image map. It uses <a href="https://github.com/etienne-martin/Mapify" rel="nofollow noreferrer">mapify</a> to make the image map responsive.</p>
  
  <p>I already tried implementing the code in every place I could think of on this page: <a href="https://sporedev.ro/pleiade/lobby.html" rel="nofollow noreferrer">https://sporedev.ro/pleiade/lobby.html</a>. The idea is to replace the arrows that you see in the picture with arrows</p>
  
  <p>I tested and the arrow works over an image. Here's the fiddle where you can check how it should work.</p>
  
  <p><a href="https://jsfiddle.net/spored3v/7557heze/4/" rel="nofollow noreferrer">https://jsfiddle.net/spored3v/7557heze/4/</a></p>
  
  <p>The code of the page contains a lot of JS to handle different resolutions so most of the HTML code is contained in a switch case. Another part of the code is there to create some highlight effect for mapped elements (no element is highlighted yet).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Bare - Start Bootstrap Template&lt;/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
      &lt;!-- Normalize CSS --&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" integrity="sha256-HxaKz5E/eBbvhGMNwhWRPrAR9i/lG1JeT4mD6hCQ7s4=" crossorigin="anonymous" /&gt;
  
      &lt;!-- Mapify CSS --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css\jquery.mapify.css"&gt;    
  
      &lt;!-- Project's Custom CSS --&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;    
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Page Content --&gt;
          &lt;!--&lt;img src="images/schita-usi-1.jpg" id="fullheight" style="height:100vh; width: 100%"&gt;
          &lt;a href="#"&gt;
              &lt;div class="index-page-3"&gt;
              &lt;/div&gt;
          &lt;/a&gt;--&gt;     
          &lt;div id="black-cover"&gt;&lt;/div&gt;
              &lt;a href="https://sporedev.ro" target="_blank"&gt;&lt;div href="#" class="arrow arrow-right active animate-right-to-left"&gt;&lt;span class="room-desc"&gt;Decanat&lt;/span&gt;&lt;/div&gt;&lt;/a&gt; 
          &lt;div id="resp-background-img-full-height"&gt;
          &lt;/div&gt;
          &lt;audio autoplay&gt;
            &lt;source src="lobby.mp3" type="audio/mpeg"&gt;
          &lt;/audio&gt;
      &lt;!-- /.container --&gt;
  
      &lt;!-- jQuery Version 1.10.2 --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- Detect the browser's aspect ratio and serve different HTML --&gt;
      &lt;script type="text/javascript"&gt;
          function gcd(a, b) {
            if (b &gt; a) {
              temp = a;
              a = b;
              b = temp
            }
            while (b != 0) {
              m = a % b;
              a = b;
              b = m;
            }
            return a;
          }
  
          /* ratio is to get the gcd and divide each component by the gcd, then return a string with the typical colon-separated value */
          function ratio(x, y) {
            c = gcd(x, y);
            return "" + (x / c) + ":" + (y / c)
          }
  
          var ratio = ratio(screen.width, screen.height)
          var imgContainer = document.querySelector('#resp-background-img-full-height')
  
          switch (ratio) {
            // case "16:9":
              // imgContainer.innerHTML = '&lt;img src="images/test-rata-de-aspect.jpg"&gt;'        
              // break        
            // case "4:3":
              // imgContainer.innerHTML = '&lt;img src="images/schita-usi-2.jpg"&gt;'
              // break
            default:
              var htmlcode = '&lt;img src="images/Lobby.jpg" usemap="#map" class="map full-img" width="1920px" height="1080px"&gt;';
              htmlcode += '&lt;map name="map" id="map""&gt;';
              htmlcode += '&lt;area shape="poly" coords="1301,992,1346,996,1354,945,1308,941" href="#" alt="contact"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1356,995,1404,999,1416,948,1368,946" href="#" alt="setari"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1420,1001,1471,1006,1477,953,1424,951" href="#" alt="login"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1354,935,1365,883,1320,881,1310,933" href="index.html" alt="home"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1370,933,1417,937,1428,885,1381,883" href="lobby.html" alt="lobby"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1440,883,1493,885,1488,941,1432,939" href="hol.html" alt="programe"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1324,866,1373,866,1382,818,1335,818" href="#" alt="back" onclick="window.history.back();"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1382,868,1433,869,1444,816,1392,817" href="#" alt="descriere"&gt;';
              htmlcode += '&lt;area shape="poly" coords="1446,868,1492,871,1501,818,1452,817" href="#" alt="harta"&gt;';    
              htmlcode += '&lt;/map&gt;';
              htmlcode += '&lt;a href="https://sporedev.ro" target="_blank"&gt;&lt;div href="#" class="arrow arrow-right active animate-right-to-left"&gt;&lt;span class="room-desc"&gt;Decanat&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;';
              imgContainer.innerHTML = htmlcode;
              break    
          }   
      &lt;/script&gt;
      &lt;!-- Load Mapify --&gt;
      &lt;script type="text/javascript" src="js/jquery.mapify.js"&gt;&lt;/script&gt;
      &lt;!-- Mapify script --&gt;
      &lt;script type="text/javascript"&gt;
      $("img[usemap]").mapify();
      &lt;/script&gt;
      &lt;!-- Load Zoom --&gt;
      &lt;script type="text/javascript" src="js/zoom.js"&gt;&lt;/script&gt;   
      &lt;script&gt;
          // Safari hack for reloading page when back button is pressed
          // https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked
          $(window).bind("pageshow", function(event) {
                  if (event.originalEvent.persisted) {
                          window.location.reload() 
                  }
          });
  
          $( document ).ready(function() {
              $("#black-cover").fadeOut(2000, "swing");
          })
  
          function zoomTo(polygonId) {
              zoom.to({
                  element: $(".mapify-polygon")[polygonId],
  
                  padding: 100,
  
                  callback: function() {
                      $("#resp-background-img-full-height").fadeOut(1500, "linear", function() {
                          window.location.href = 'hol.html';
                      })
                  }
              });
          }
      &lt;/script&gt;
      &lt;script&gt;
  var timeout;
  function blinkIn() {
     timeout = setTimeout(function() {
      $("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger("mouseenter.mapify").trigger("focus.mapify").trigger("touchend.mapify");
      $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "#FFF").css('opacity', '0.3').css('stroke-dasharray', '50').css('stroke-dashoffset', '100').css('animation', 'dash 1.5s linear forwards');
      blinkOut();
    }, 3000);
  }
  
  function blinkOut() {
     setTimeout(function() {
      $("#map area").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').trigger('mouseout.mapify');
      $(".mapify-svg polygon").filter(':eq(0), :eq(1), :eq(2), :eq(3), :eq(4), :eq(5), :eq(6), :eq(7), :eq(8), :eq(9), :eq(10), :eq(11), :eq(12), :eq(13), :eq(14)').css("stroke", "").css('opacity', '').css('stroke-dasharray', '').css('stroke-dashoffset', '').css('animation', '');;
      blinkIn();
    }, 1500);
  }
  
  blinkIn();
  $(document).click(function(e) { clearTimeout(timeout); blinkIn(); });
      &lt;/script&gt;       
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I did some research on both SO and other website, trying out a bunch of guides about positioning but I think that the problem is not in the way I tried to position the element but in the JS that is running on the page.</p>
  
  <p>Creating a test page and that fiddle further proved my theory. </p>
  
  <p>My question is: how can I make an element appear on top of a responsive image map?</p>