是否可以将DIV的定位从绝对位置改为相对位置（或从相对位置改为绝对位置）？
DIV应该保持在同一位置。
DIV应该保持在同一位置。
将绝对位置转换为相对位置
5
- John
2
1你是在问“它会保持在同一个位置吗？”。如果是的话，是的，但是相对而言，它将会在文档流中，绝对而言，它则不会。 - Zoidberg
我有一些绝对定位的元素需要转换为相对定位。问题在于我无法计算相对位置（上、左），因此这些元素将保持在它们原本的位置上。 - John
5个回答
8
由于在评论中进行格式化无法工作，因此我将在此处发布解决方案。
$(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 });
- John
5
您可以使用以下方法更改该属性：
$(object).css({position: 'absolute'});
例如：
您可以使用jQuery的方法
.position()或.offset()来设置"top"和"left" CSS属性，这样您的对象应该保持在其位置上，在相对位置发生变化的情况下从相对位置变为绝对位置。
我认为反过来做是行不通的。
- jAndy
1
$(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'});
offset({ top: y, left: x }); - John
2
如果您想得到一个具有绝对和相对位置的元素子元素的总顶部偏移量，可以使用此函数。
function calcTotalOffsetTop(elm)
{
var totalOffsetTop = 0,
curr = elm;
while( curr.parent().is(':not(body)') )
{
curr = curr.parent();
totalOffsetTop += curr[0].offsetTop;
}
return totalOffsetTop;
}
这基本上是Plodder提供的解决方案的代码。
- Garzun
1
这对于非body父元素内的元素非常完美，这正是我所需要的。谢谢。实际上，我使用prototype.js框架，所以我想知道'absolutize（）'是否与下面提到的相同，但我有一种感觉它只会使元素相对于其父元素而不是文档主体“绝对”。因此，我将使用您的解决方案... - Charles Robertson
1
你可以使用它的 offsetLeft 和 offsetTop 值作为 left 和 top 样式，从相对定位方便地更改为绝对定位。
相反的方法较难。基本上，你需要将其更改为相对定位并查看其最终位置，然后从当前偏移量和所需位置计算新的偏移值。
请注意，当定位为相对定位时，元素是页面流的一部分，并可能影响其他元素。当定位为绝对定位时，元素位于页面流之外，不会影响其他元素。因此，如果你在绝对定位和相对定位之间切换，则如果不希望它们移动，可能还需要对其他元素进行更改。
- Guffa
1
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 +
etc.)
- plodder
1
我一直想知道这个方法实际上是做什么的？它会使一个非“body”子元素保持其位置，同时将其附加到文档的主体吗？还是它只是相对于其父元素“绝对化”一个元素？如果是后者，那么我将使用你上面提供的解决方案。谢谢。 - Charles Robertson
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接