css绝对位置在另一个元素的顶部

Question

我正在制作一个html游戏(没有画布)，玩家可以点击图片链接来做能力。随后，异能持续冷却一秒钟。为了直观地显示这个冷却时间，我动态地创建了一个div标记，它是半透明的，大小与以文本为中心的显示冷却时间还剩多少秒的能力图像相同。然后，我得到单击的能力图像链接的位置，并将这个div定位在相同的位置，减去文档scrollTop() (因为我在某个地方读到了它，但这与当前没有它的地方没有什么区别)。问题是div没有垂直排列。左上角是大约1/2的实际图像链接，我不知道为什么。有什么想法吗？

// 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" })
}

我没有显示div标记的整个append()，因为它只会使事情变得混乱。.css()部分是如何定义div的，我使用点击图像链接的顶部位置作为div的顶部位置，但它最终比实际图像链接低1/2。

以下是html的“相关”部分。下面是主体。

<div class="container-fluid">
        <!--Actions-->
        <div id="divActionRow" class="row" style="margin-top: 0px;">
            <div id="divPlayerActions" class="col-md-6 text-center">
                <a href="#" class="action" data-cd="5000" data-cast="1000" data-oncooldown="false" id="Cripple"> <img src="/Content/cripple.png"> </a>
                <a href="#" class="action" data-cd="8000" data-cast="2000" data-oncooldown="false" id="GroundSlam"> <img src="/Content/ground_slam.png"> </a>
            </div>
        </div>
    </div>

    <!--This is where we dynamically hold the cd divs-->
    <div id="divCDHolders">
       <!--When a cd is active this is what it looks like-->
        <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);">2</div>
    </div>

Answer 1

这是有帮助的，我不知道为什么要处理偏移位置来创建一个覆盖，因为您可以使覆盖在元素中，并使用相对于单击的父元素的absolute。检查这个片段：

​

function overl () {
  var overlay = '<div class="overlay">10</div>';
  $(this).append(overlay);
  var ov = $(this).find('.overlay');
  ov.fadeIn('fast');
  timer(ov);
  $(this).off('click',overl);
}
function timer($el) {
  var sec = $el.text();
  var timer = setInterval(function() { 
   $el.text(--sec);
   if (sec == 0) {
      $el.fadeOut('1000',function(){
        $el.remove();
      });
     $el.parent().on('click',overl);
     clearInterval(timer);
   } 
  }, 1000);
}
$(".action").on('click',overl);

.action {
  display:inline-block;
  width: 70px;
  height: 70px;
  font-size: 45px;
  line-height: 70px;
  background: red;
  color: white;
  text-align: center;
  border-radius: 10px;
  position: relative;
  font-family: 'verdana';
  cursor: pointer;
  transition: all .3s linear;
  overflow:hidden;
  margin:10px;
}
.overlay {
  display:none;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  position:absolute;
  top:0;
  left:0;
  z-index:10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="action">A</div>
<div class="action">B</div>
<div class="action">C</div>

​