jquery - 如何使用jquery根据其他div应用顶部和左侧位置

Question

嗨，我想使用 jquery 根据其他 div 位置应用 div 的顶部和左侧位置。

jQuery(document).ready(function() {
var msg_top = jQuery(".color-cont").position().top;
var msg_left = jQuery(".color-cont").position().left;   
jQuery(".messages").css({'top': msg_top + "50px", 'left': msg_left + "50px"});
});
});

这个的html代码是：

<div class="color-cont">abc def ghi</div>
<div class="messages">apply on this</div>

您可以在此处的 jsfiddle 链接上进行编辑：http: //jsfiddle.net/axpXU/

Answer 1

最后一行是不必要的，msg_top + "50px"改为(msg_top + 50) + "px"

jQuery(document).ready(function() {
    var msg_top = jQuery(".color-cont").position().top;
    var msg_left = jQuery(".color-cont").position().left;   
    jQuery(".messages").css({'top': (msg_top + 50) + "px", 'left': (msg_left+50) + "px"});
}); 

Answer 2

试试这个：演示

jQuery

var msg_top = $(".color-cont").position().top;
var msg_left = $(".color-cont").position().left;    
$(".messages").css({
    'top': msg_top + 50 + 'px',
    'left': msg_left + 50 + 'px'
});

你的代码最后有额外});的，这就是它不起作用的原因。并且，.position()返回整数值。而是8 + "50px"连接和给予850px。将其更改为8 + 50 + "px". 这8是来自变量的值msg_...，

+.position()

Answer 3

尝试这个

jQuery(document).ready(function() {
  var msg_top = jQuery(".color-cont").position().top;    
  var msg_left = jQuery(".color-cont").position().left; 
  jQuery(".messages").css({'top': parseInt(msg_top +50)+ "px", 'left': parseInt(msg_left +    50)+"px"});
});

在您的代码中，有});额外的 andtop和leftreturn in int。

演示