如果元素定位设置为绝对，则jQuery position()返回零值
如果元素定位设置为绝对，则jQuery position()返回零值
提问于 2013-05-11 15:19:58
我有一些带有"area“类的div，它们是相邻浮动的。我有以下jQuery代码：
$(".area").each(function(){
var pos = $(this).position();
$(this).css({"left":pos.left, "top":pos.top});
});这可以很好地工作，但遗憾的是，当元素静态定位时，浏览器不会考虑top和left。如果我修改元素的position值，pos.left和pos.top都为零。也就是说，如果我有这样的代码：
$(".area").each(function(){
var pos = $(this).position();
$(this).css({"left":pos.left, "top":pos.top, "position":"absolute"});
});然后，$(this).position()始终返回{left:0,top:0}。我是误解了$.position()的工作原理，还是误解了CSS position的工作原理，还是这是个bug？有没有人对如何解决这个问题有什么建议？
回答 1
Stack Overflow用户
发布于 2013-05-11 16:15:36
跟进我的评论。我创建了一个jsFiddle示例来解释发生了什么。
当您定位第一个.area时，它会将其从流中移除，现在您的第二个.area将占据它的位置。这在$.each()中的每个迭代中都会继续。所以如果你的第一个元素从位置0,0开始，那么当它移动到绝对位置时，下一个元素就变成了0,0。理想情况下，您需要先保存一个包含位置的数组，然后重新定位它们：
$(".area").each(function () {
var pos = $(this).position();
savedPos.push({
left: pos.left,
top: pos.top
});
});
$(".area").each(function (i) {
$(this).css({
"position": 'absolute',
"left": savedPos[i].left,
"top": savedPos[i].top
});
});或在设置左/右后设置位置：
$(".area").each(function () {
var pos = $(this).position();
$(this).css({
"left":pos.left,
"top": pos.top
});
});
$('.area').css('position','absolute');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16498639
复制相关文章
点击加载更多
相似问题
如何使我的图像响应，最大宽度不工作
图像对最大宽度属性没有响应。
图像的宽度和最大宽度属性
如何使IE支持最小宽度/最大宽度CSS属性？
最大高度和最大宽度的响应图像
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
