Question

您好我想根据其他div位置使用jquery来应用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

试试这个：Demo

<强>的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"});
});

在您的代码中，});内有top个额外left和int次返回。

Demo

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

3 个答案: