title: (CSS) Table element overlaps and hides map area
body: <p>I have a div (which has <code>position: relative;</code>) and it contains 3 child element.
  The first child element is an <code>image</code> ,the second child element is an <code>image-map</code> for the above image (and the map has 2 area fields which have links) which work when hovered over the image  and the third child element is a <code>table</code> (which overlaps the entire image {on purpose}) and is <code>position: absolute; top: 0;</code> naturally. (also the <code>table</code>  has 3 <code>&lt;tr&gt;</code> elements)</p>
  
  <p>Problem is as follows: because the table element overlaps the entire image,it also overlaps the <code>map area's</code> and they can't be triggered by <code>hover</code> (<em>so when you hover over the image where the area maps are ,nothing happens,because the table is over them)</em>.</p>
  
  <p>It looks something like this :</p>
  
  <pre><code>&lt;div class="some class"&gt;
    &lt;img class="some class" src="/image.png" use="mapname"/&gt;
    &lt;map name="random map name"&gt;
      &lt;area href="some link" shape="rect" coords="some numbers"&gt;
      &lt;area href="some link" shape="rect"coords="some numbers"&gt;
    &lt;/map&gt;
    &lt;table&gt;
     &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas how I can force the map areas to work?</p>
  
  <p>IMPORTANT! : absolutely no changes to the DOM tree can be made,entire code is generated and has been made to work responsively. [So only CSS implementation can be made].</p>
  
  <p>I appreciate the help :)</p>