156

.offset([coordinates])方法设置元素的坐标，但仅相对于文档。那么如何设置元素的坐标但相对于父级？

我发现该.position()方法仅获取相对于父级的“顶部，左侧”值，但它没有设置任何值。

我试过了

$("#mydiv").css({top: 200, left: 200});

但不起作用。

4

7 回答 7

243

要设置相对于父级的位置，您需要设置position:relative父级和position:absolute元素的

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

这是因为position: absolute;位置相对于最近定位的父级（即，具有除 default 之外的任何位置属性的最接近的父级static）。

于 2012-10-05T11:18:28.710 回答
43 
$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);
于 2012-10-05T11:09:48.807 回答
13

你可以试试 jQuery UI 的.position方法。

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

检查工作演示。

于 2012-10-05T11:08:26.413 回答
6

我发现如果传递的值是字符串类型，后面必须跟'px'（即90px），如果是整数，它会自动追加px。width 和 height 属性更宽容（任何一种都可以）。

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work
于 2015-09-24T22:11:36.773 回答
6

动态页面的代码偏移量动态

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});
于 2015-11-23T07:02:06.717 回答
0

记忆中的定位，我来的这么晚，不知道有没有人会看到，但是——

我不喜欢使用 设置位置css()，尽管通常它很好。我认为最好的办法是使用position()xdazz 所指出的 jQuery UI 的 setter。但是，如果 jQuery UI 出于某种原因不是一个选项（但 jQuery 是），我更喜欢这个：

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

这具有不将$div' 父级任意设置为相对定位的优点（如果$div' 父级本身是绝对定位在其他东西中怎么办？）。我认为唯一的主要边缘情况是 if $divdoesn't have any offsetParent，不确定它是否会返回document,null或完全其他的东西。

offsetParent从 jQuery 1.2.6 开始，2008 年的某个时候就可以使用，所以这种技术现在和当原始问题被问到时都有效。

于 2018-02-22T17:16:49.770 回答
0

使用offset()的功能jQuery。这将是：

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });
于 2019-07-11T05:24:37.967 回答