In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

.offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent?

I found that .position() method get only "top,left" values relative to the parent, but it doesn't set any values.

I tried with 

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

but does not work.

425648 次浏览
小开

您可以尝试 jQueryUI 的 。位置方法。

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

检查工作演示。

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


$("#mydiv").css('left', 200);
小开
最佳答案

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

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

这是因为 position: absolute;的位置相对于最近的 定位父节点(即，除了默认的 static之外，还有任何位置属性的最近的父节点)。

小开

我发现如果传递的值是一个字符串类型，它必须后跟“ px”(即90px) ，如果值是一个整数，它将自动附加 px。宽度和高度属性更加宽容(两种类型都可以)。

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
小开

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

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

提醒我设定位置的事，我来得太晚了，不知道别人会不会看到，但是..

我不喜欢设置位置使用 css()，虽然它往往是罚款。我认为最好的办法是使用 jQueryUI 的 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年的某个时候)开始就可以使用了，所以这种技术现在就可以工作了，而且当最初的问题被提出时也可以工作。

小开

使用 jQuery的 offset()函数，如下所示:

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

提交答案