Question

我有这个div，当它们被点击时出现在某些元素下面。当页面被缩放时我遇到了问题，因为这导致div失去透视，并且元素和div之间出现间隙。所以我尝试设置一个setInterval函数，它会每秒重新定位div，这样可以解决问题。不幸的是，它似乎没有效果，我无法弄清楚为什么，并希望有人可能会看到我出错的地方。我做了一个基本的模型来证明这一点。如果您访问此jsFiddle并单击输入，然后放大/缩小您可以看到出现间隙，并且setInterval函数无效。谢谢你的阅读。我将把代码放在下面，但jsFiddle确实表现得更好。

N.B在实际版本中差距更大。

var eleTop,
 eleLeft;

 setInterval(function(){
    $('#box').css({
       top: eleTop + "px",
       left: eleLeft + "px",

   });
 }, 100);

 $('body').click(function(e){

   eleTop =  $(e.target).offset().top + 27;
   eleLeft = $(e.target).offset().left;

 $('#box').css({

     top: eleTop + "px",
     left: eleLeft + "px",
  });

      $('#box').show();

});

HTML：

<body>
   <input type = "text" />
   <input type = "text" />
   <input type = "text" />

   <div id = "box">box</div>

</body>

Answer 1

好吧，我可以提出另一种方法。尝试使用CSS而不是javascript进行定位。它真的很有效。你可以做的是将输入元素包装到另一个div并将#box绝对地放在父包装器上：

CSS

.wrap {
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;
}
.wrap #box {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

HTML

<div class="wrap"><input type="text" value="click"></div>
<div class="wrap"><input type="text" value="one"></div>
<div class="wrap"><input type="text" value="of us"></div>

Javascript仅用于将#box附加到相应的包装器（当前焦点输入的父级）：

var eleTop,
    eleLeft,
    $box = $('#box');

$('input').click(function (e) {
    $(this).parent().append($box);
});

使用setInterval函数定位div

1 个答案:

演示：http://jsfiddle.net/TxGW4/5/