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

Я не показывал весь append() тега div, потому что он просто загромождал вещи. Часть .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>