设置jQuery元素相对于父元素的偏移量

Setting offset of an element with jQuery relative to parent

本文关键字：元素 偏移量 相对于 jQuery 设置      更新时间：2023-09-26

我正在尝试设置元素相对于父元素的偏移量(顶部和左侧)

我有一个相对位置的容器和一个绝对显示位置的元素。如何设置绝对元素的顶部和左侧?偏移设置与文档相关的顶部和左侧，我不需要它。

提前感谢!

编辑:这是我的代码:

var styles = {
        width: 200,
        height: 200,
        position: 'absolute',
        top: 10,
        left: 20
    };
$imgScaledCircle.attr('src', pathimg).css(styles).addClass('active');

它设置了除top和left之外的所有属性。我不明白为什么。

您可以这样使用:

$(child).each(function () {
  $(this).css({
    top: $(this).parent().offset().top + 5,
    left: $(this).parent().offset().left + 5
  });
});

这里child是子元素的选择器。您可以将硬编码的5替换为您想要替换的任何位置。

具有position:absolute的n元素使用相对于您发现向上移动的父链的第一个容器的坐标，该位置为absolute或relative。具有默认position属性(static)的元素在此搜索期间不被考虑。

若要将元素放入位于容器内给定像素的容器中，则容器本身应声明为position: relative，而left和top为默认值。

.container { position: relative; }
.element { position: absolute;
           left: 100px;
           top: 30px; }

我明白为什么我的代码不工作了。我把一个值存储在一个变量中:

var coord = $that.attr('coords').split(','); var styles = { position: 'absolute', top: coord[1], left: coord[0] };

它不工作。可能是因为split方法返回的是字符串而不是数字。如果我这样写(强制一个变量为Number):

var coord = $that.attr('coords').split(','); var styles = { position: 'absolute', top: (coord[1] >>> 0), left: (coord[0] >>> 0) };

它正确地添加样式。谢谢你的帮助。

相关文章：