Question

点击＆＃34; P＆＃34;，我原本希望$div改变位置并位于#p之上。但它没有移动，$div.position(pos_p)保持不变。为什么？？？如何移动元素的位置？

＆＃13;

$(function(){
  var $div = $('<div/>', {text:'DIV',style: 'top:40px;left:40px;position:absolute;'}).appendTo('body');
  $('#p').click(function(){
    var $p=$(this),
        pos_p=$p.position(),
        pos_div=$div.position();
    console.log($p,$div,pos_p,pos_div);
    $div.position(pos_p)
    console.log($p,$div,pos_p,$div.position());
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<p id="p">P</p>

＆＃13;

Answer 1

不要将位置设置为css位置

$div.css({top: ... , left: ...} );

Answer 2

                $(function(){
            var $div = $('<div/>', {text:'DIV',style: 'top:40px;left:40px;position:absolute;border:1px solid'}).appendTo('body');
            $('#p').click(function(){
            var $p=$(this),
            pos_p=$p.position(),
            pos_div=$div.position();
            $div.css(pos_p);
            })
            });

我使用CSS将div放在P

上

Answer 3

＆＃13;

				$(function() {
				  var $div = $('<div/>', {
				    text: 'DIV',
				    style: 'top:40px;left:40px;position:absolute;border:1px solid'
				  }).appendTo('body');
				  $('#p').click(function() {
				    var $p = $(this),
				      pos_p = $p.position(),
				      pos_div = $div.position();
				    $div.css(pos_p);
				    $p.css(pos_div);
				  })
				});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">P</p>

＆＃13;

Answer 4

您可以使用$div.css(pos_p)代替$div.position(pos_p)

示例：https://jsfiddle.net/jcktk4zu/

＆＃13;

$(function(){
  var $div = $('<div/>', {text:'DIV',style: 'top:40px;left:40px;position:absolute;'}).appendTo('body');
  $('#p').click(function(){
    var $p=$(this),
        pos_p=$p.position(),
        pos_div=$div.position();

    $div.css(pos_p)
    console.log($p,$div,pos_p,$div.position());
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">P</p>

＆＃13;

Answer 5

您还可以使用偏移来获取所有可能的定位设置。

小提琴：https://jsfiddle.net/513chbeL/

<!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>

改变绝对风格元素的位置

5 个答案: