【问题标题】:Convert absolute position to relative将绝对位置转换为相对位置
【发布时间】:2011-02-02 11:57:40
【问题描述】:

是否可以将 DIV 位置从绝对更改为相对(以及从相对更改为绝对)? DIV 应保留在同一位置。

【问题讨论】:

  • 您是在问“它会留在同一个地方吗?”。如果是这样,是的,但相对而言,它将在文档流中,绝对不会。
  • 我有绝对定位的元素,应该转换为相对的。问题是我无法计算相对右侧位置 (top, left) ,因此元素将保留在它们的位置上。

标签: javascript jquery html positioning


【解决方案1】:

你可以改变这个属性

$(object).css({position: 'absolute'});

例如:
您可以使用 jQuery 的方法 .position().offset() 设置“top”和“left” css 属性,这样你的对象应该保持在它的位置变化 从相对 -> 绝对。

我不认为反之亦然。

演示代码:http://jsbin.com/uvoka

【讨论】:

  • $(object).css({position: 'absolute',top: dy, left:dx}); clone.css({position: 'relative'});不起作用 - 更改为相对后的元素位置,位置不同但是当我存储偏移量并在更改为相对后再次设置时,位置相同 $(object).css({position: 'absolute',top: dy, left :dx}); var x = clone.offset().left; var y = clone.offset().top; clone.css({position: 'relative'});偏移量({ 上:y,左:x });
【解决方案2】:

您可以通过使用它的 offsetLeft 和 offsetTop 值作为 left 和 top 样式很容易地将它从相对更改为绝对。

反之则更难。您基本上必须将其更改为相对并查看它最终的位置,然后根据当前偏移量和所需位置计算新的偏移量值。

注意,当定位是相对时,元素是页面流的一部分,可能会影响其他元素。当位置为绝对时,该元素位于页面流之外,不会影响其他元素。因此,如果您在绝对定位和相对定位之间进行更改,如果您不希望它们移动,您可能还需要对其他元素进行更改。

【讨论】:

    【解决方案3】:

    由于 cmets 中的格式不起作用,我将在此处发布解决方案

    $(object).css({position: 'absolute',top: dy, left:dx});
    // dy, dx - some coordinates
    $(object).css({position: 'relative'});
    

    不起作用:更改为相对后的元素位置不同。

    但是当我存储偏移量并在更改为相对后再次设置时,位置是相同的:

    $(object).css({position: 'absolute',top: dy, left:dx});
    var x = $(object).offset().left;
    var y = $(object).offset().top;
    $(object).css({position: 'relative'});
    $(object).offset({ top: y, left: x }); 
    

    【讨论】:

    • 感谢分享。真的帮了我。
    【解决方案4】:

    prototype.js 有 element.absolutize() 和 element.relativize 效果很好。

    从相对到绝对的问题在于 element.offsetTop 和 offsetLeft

    仅将元素的偏移量提供给其父元素。 您需要测量累积偏移量(即

    the offset of your element to its parent +
    the offset of the parent to its parent +
    the offset of its parent to its parent +
    

    等等)

    【讨论】:

    • 我一直想知道这个方法,究竟有什么作用?它会使非“body”子元素保持其位置,同时将其附加到文档的正文中吗?还是它只是相对于其父元素“绝对化”一个元素?如果是后者,那么我将使用您上面的解决方案。谢谢
    【解决方案5】:

    如果你真的想得到一个元素的总顶部偏移量,它是具有绝对和相对位置的元素的子元素,你可以使用这个函数

    function calcTotalOffsetTop(elm)
    {
    var totalOffsetTop  = 0,
    curr            = elm;
    
    while( curr.parent().is(':not(body)') )
    {
        curr            = curr.parent();
        totalOffsetTop  += curr[0].offsetTop;
    }
    return totalOffsetTop;
    }
    

    这基本上是上面 plodder 给出的解决方案的代码。

    【讨论】:

    • 这对于非 body 父级中的元素来说是完美的,这正是我所需要的。谢谢。实际上,我使用的是prototype.js框架,所以我想知道'absolutize()'是否做同样的事情,如下所述,但我有一种感觉,它只会让一个元素相对于它的父元素而不是'absolute'文档正文。所以,我将使用您的解决方案...
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-06
    • 1970-01-01
    • 2017-04-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多