在 jQuery 中，如何设置具有相对于父级而不是文档的位置值的元素的“top,left”属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12744928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?
提问by Max
.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?
.offset([coordinates])方法设置元素的坐标，但仅相对于文档。那么如何设置元素的坐标但相对于父元素？
I found that .position()method get only "top,left" values relative to the parent, but it doesn't set any values.
我发现该.position()方法只获取相对于父级的“top,left”值，但它没有设置任何值。
I tried with
我试过
$("#mydiv").css({top: 200, left: 200});
but does not work.
但不起作用。
回答by Champ
To set the position relative to the parent you need to set the position:relativeof parent and position:absoluteof the element
要设置相对于父级的位置，您需要设置position:relative父级和position:absolute元素的
$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});
This works because position: absolute;positions relatively to the closest positionedparent (i.e., the closest parent with any position property other than the default static).
这是有效的，因为position: absolute;位置相对于最近定位的父级（即，具有除 default 之外的任何位置属性的最近父级static）。
回答by MMALSELEK
$("#mydiv").css('top', 200);
$("#mydiv").css('left', 200);
回答by xdazz
回答by Derek Wade
I found that if the value passed is a string type, it must be followed by 'px' (i.e. 90px), where if the value is an integer, it will append the px automatically. the width and height properties are more forgiving (either type works).
我发现如果传递的值是字符串类型，后面必须跟'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
回答by behzad
Code offset dynamic for dynamic page
动态页面的代码偏移动态
var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});
回答by knickum
Refreshing my memory on setting position, I'm coming to this so late I don't know if anyone else will see it, but --
刷新我对设置位置的记忆，我这么晚才来，我不知道其他人会不会看到它，但是——
I don't like setting position using css(), though often it's fine. I think the best bet is to use jQuery UI's position()setter as noted by xdazz. However if jQuery UI is, for some reason, not an option (yet jQuery is), I prefer this:
我不喜欢使用 设置位置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
});
This has the advantage of not arbitrarily setting $div's parent to relative positioning (what if $div's parent was, itself, absolute positioned inside something else?). I think the only major edge case is if $divdoesn't have any offsetParent, not sure if it would return document, null, or something else entirely.
这具有不会任意将$div的父级设置为相对定位的优点（如果$div的父级本身是绝对定位在其他位置内呢？）。我认为唯一的主要边缘情况是，如果$div没有任何offsetParent，不知道这是否会返回document，null或别的东西完全。
offsetParenthas been available since jQuery 1.2.6, sometime in 2008, so this technique works now and when the original question was asked.
offsetParent自 jQuery 1.2.6 开始可用，在 2008 年的某个时候，因此该技术现在以及在提出原始问题时都有效。
回答by Sreekanth S
Use offset()function of jQuery. Here it would be:
使用 的offset()功能jQuery。这将是：
$container.offset({
'left': 100,
'top': mouse.y - ( event_state.mouse_y - event_state.container_top )
});
