Javascript 更改绝对样式元素的位置_Javascript_Jquery

Javascript 更改绝对样式元素的位置

javascript jquery

Javascript 更改绝对样式元素的位置,javascript,jquery,Javascript,Jquery,单击“p”时，我希望$div改变位置并位于#p上方。但它不移动，$div.position（pos\u p）保持不变。为什么？如何移动元素的位置 $（函数（）{ var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；'}）； $（'#p'）。单击（函数（）{ var$p=$（此）， pos_p=$p.位置（）， pos_div=$div.position（）；日志（$p，$div，pos\u p，pos\u

单击“p”时，我希望

$div

改变位置并位于

#p

上方。但它不移动，

$div.position（pos\u p）

保持不变。为什么？如何移动元素的位置

$（函数（）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；'}）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
日志（$p，$div，pos\u p，pos\u div）；
$div.position（位置p）
log（$p，$div，pos_p，$div.position（））；
})
});

p
不要设置位置设置css位置
$div.css({top: ... , left: ...} );

不设置位置设置css位置
$div.css({top: ... , left: ...} );

$（函数（）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；border:1px solid'}）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
$div.css（pos_p）；
})
});

我使用CSS将div放置在p
$（function（）上）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；border:1px solid'}）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
$div.css（pos_p）；
})
});

我使用CSS将div放置在p上
$（函数（）{
变量$div=$（''{
文本：“DIV”，
样式：“顶部：40px；左侧：40px；位置：绝对；边框：1px实心”
}).附于（“主体”）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
$div.css（pos_p）；
$p.css（pos_div）；
})
});

p
$（函数（）{
变量$div=$（''{
文本：“DIV”，
样式：“顶部：40px；左侧：40px；位置：绝对；边框：1px实心”
}).附于（“主体”）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
$div.css（pos_p）；
$p.css（pos_div）；
})
});

p
您可以使用$div.css（pos\u p）
而不是$div.position（pos\u p）

例如：

$（函数（）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；'}）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
$div.css（位置p）
log（$p，$div，pos_p，$div.position（））；
})
});

p
您可以使用$div.css（pos\u p）
而不是$div.position（pos\u p）

例如：

$（函数（）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；'}）；
$（'#p'）。单击（函数（）{
var$p=$（此），
pos_p=$p.位置（），
pos_div=$div.position（）；
$div.css（位置p）
log（$p，$div，pos_p，$div.position（））；
})
});

p
您还可以使用偏移量获得所有可能的定位设置
小提琴：

测试
#p{
背景：#f00；
颜色：#fff；
光标：指针；
}
div{
背景：#00f；
颜色：#fff；
}
$（函数（）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；'}）；
$（'p'）。在（'click'，function（）上{
var$p=$（本）；
log（$p，$div，$div.offset（））；
$div.offset（$p.offset（））；
log（$p，$div，$div.offset（））；
})
});
p
您还可以使用偏移来获取所有可能的定位设置
小提琴：

测试
#p{
背景：#f00；
颜色：#fff；
光标：指针；
}
div{
背景：#00f；
颜色：#fff；
}
$（函数（）{
var$div=$（“”，{text:'div'，style:'top:40px；left:40px；position:absolute；'}）；
$（'p'）。在（'click'，function（）上{
var$p=$（本）；
log（$p，$div，$div.offset（））；
$div.offset（$p.offset（））；
log（$p，$div，$div.offset（））；
})
});
p
jQuery是否解决了这个问题：？这是无效的HTML。@Rob-无效的HTML是的，但jQuery理解它并创建一个空div。您可以使用$div.css（pos\u p）
而不是$div.position（pos\u p）
jQuery解决了这个问题吗？这是无效的HTML。@Rob-无效的HTML是的，但jQuery理解它并创建一个空div。您可以使用$div.css（pos\u p）
而不是$div.position（pos\u p）
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        #p {
        background: #f00;
        color: #fff;
        cursor: pointer;
        }

        div {
        background: #00f;
        color: #fff;
        }
    </style> 
        <script type="text/javascript"> 
            $(function(){
                var $div = $('<div>', {text:'DIV',style: 'top:40px;left:40px;position:absolute;'}).appendTo('body');
                $('#p').on('click', function() {
                    var $p = $(this);
            console.log($p, $div, $div.offset());
                    $div.offset($p.offset());
            console.log($p, $div, $div.offset());
                })
            });
        </script>
    </head>

    <body>
    <p id="p">P</p>
    </body> 
</html>