CODEWITHSUNDEEP
javascriptjquery
user1032531
user1032531

Reputation: 26281

Change position of absolute styled element

Upon clicking "P", I would have expected $div to change position and be located over #p. But it doesn't move, and $div.position(pos_p) remains the same. Why??? How do I move the position of an element?

$(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());
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<p id="p">P</p>

Upvotes: 0

Views: 57

Answers (5)

Gummibeer
Gummibeer

Reputation: 197

You also can use offset to get all the possible positioning settings.

Fiddle: 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>

Upvotes: 0

Yuriy Yakym
Yuriy Yakym

Reputation: 3911

You can use $div.css(pos_p) instead of $div.position(pos_p)

Example: https://jsfiddle.net/jcktk4zu/

$(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());
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">P</p>

Upvotes: 1

Lucky Chingi
Lucky Chingi

Reputation: 2258

				$(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);
				  })
				});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">P</p>

Upvotes: 1

Lucky Chingi
Lucky Chingi

Reputation: 2258

                $(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);
            })
            });

I used CSS to place the div over P

Upvotes: 1

Kinnza
Kinnza

Reputation: 1301

Dont set the position set the css location

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

Upvotes: 2

Related Questions