在 jQuery 中，如何设置元素的“top,left”属性，其位置值相对于父级而不是文档？

Posted 2023-03-05

【中文标题】在 jQuery 中，如何设置元素的“top,left”属性，其位置值相对于父级而不是文档？

【英文标题】：In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

【发布时间】：2012-09-26 12:45:41

【问题描述】：

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

我发现.position() 方法仅获取相对于父级的“top,left”值，但它没有设置任何值。

我试过了

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

但不起作用。

【参考方案1】：

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

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

Check the working demo.

【讨论】：

请注意，该方法不是来自 jQuery 的 position()，而是来自 jQuery UI 的 position()，它是一个 SETTER。 api.jqueryui.com/position

@AdrianoG.V.Esposito，如何定义右下偏移

【参考方案2】：

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

【参考方案3】：

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

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

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

【讨论】：

$("#mydiv").css(top: '200px', left: '200px', position:'absolute'); $("#mydiv").css(top: '200', left: '200', position:'absolute'); 值是字符串，则必须包含单位，否则将不起作用。

关于有一个相对定位的父母的注释让我省了很多挫折。谢谢。

【参考方案4】：

我发现如果传递的值是字符串类型，后面必须跟'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

【参考方案5】：

动态页面的代码偏移动态

var pos=$('#send').offset().top;
$('#loading').offset( top : pos-220);

【参考方案6】：

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

我不喜欢使用css() 设置位置，虽然通常它很好。我认为最好的办法是使用 jQuery UI 的 position() setter，如 xdazz 所述。但是，如果 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 的父级本身是绝对定位在其他东西中呢？）。我认为唯一的主要边缘情况是如果$div 没有任何offsetParent，不确定它是否会返回document、null 或完全其他的东西。

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

【参考方案7】：

使用jQuery 的offset() 函数。应该是这样的：

$container.offset(
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    );