title: css absolute position on top of another element
body: <p>I'm making an html game (no canvas) where players can click image links to do abilities. Abilities then go on cooldown for a set number of seconds. To visually show this cooldown I dynamically create a div tag that is semi-transparent and the same size as the ability images that has the text centered that shows how many seconds remain on the cooldown. I then get the position of the clicked ability image link and position this div at the same location minus the document scrollTop() (because I read that somewhere but this isn't making a difference with or without it currently). The problem is the div doesn't line up vertically. The top left corner is about 1/2 way down the actual image link and I'm not sure why. Any ideas?</p>
  
  <pre><code>// the ability image link click event
  $(".action").click(function (e) {
      // get the position of the clicked ability image link
      var position = $(this).offset();
  
      // when I dynamically create the div element here is the css I use
      .css({ "position":"absolute", "top":(position.top - $(document).scrollTop()), "left":position.left, "width":"66px", "height":"66px", "line-height":"66px", "background-color":"rgba(125, 125, 125, 0.75)", "text-align":"center", "vertical-align":"middle", "font-size":"30px", "color":"red" })
  }
  </code></pre>
  
  <p>I didn't show the entire append() of the div tag because it would just clutter things up. The .css() part is how the div is defined and I use the top position of the clicked image link as the div's top position but it ends up 1/2 way below the actual image link.</p>
  
  <p>Here are the "relevant" parts of the html. Below is the main body.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
          &lt;!--Actions--&gt;
          &lt;div id="divActionRow" class="row" style="margin-top: 0px;"&gt;
              &lt;div id="divPlayerActions" class="col-md-6 text-center"&gt;
                  &lt;a href="#" class="action" data-cd="5000" data-cast="1000" data-oncooldown="false" id="Cripple"&gt; &lt;img src="/Content/cripple.png"&gt; &lt;/a&gt;
                  &lt;a href="#" class="action" data-cd="8000" data-cast="2000" data-oncooldown="false" id="GroundSlam"&gt; &lt;img src="/Content/ground_slam.png"&gt; &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!--This is where we dynamically hold the cd divs--&gt;
      &lt;div id="divCDHolders"&gt;
         &lt;!--When a cd is active this is what it looks like--&gt;
          &lt;div id="Cripple_cd_value" style="position: absolute; top: 448px; left: 181.5px; width: 66px; height: 66px; line-height: 66px; text-align: center; vertical-align: middle; font-size: 30px; color: red; background-color: rgba(125, 125, 125, 0.74902);"&gt;2&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>