Change position of absolute styled element
Question
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>
5 answers
solution1
2 ACCPTED 2015-10-20 15:24:56
不要设置位置设置css位置
$div.css({top: ... , left: ...} );
solution2
1 2015-10-20 15:30:08
$(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
solution3
1 2015-10-20 15:30:49
$(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>
solution4
1 2015-10-20 15:34:39
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>
solution5
0 2015-10-20 15:36:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to change an element's position to absolute?
issue with absolute position of element
Collapse an Element with Position: Absolute
How to dynamically change the position of an absolute tooltip base on the target element
Make element absolute, but do not change its position on the screen
position:absolute is floating over the element
Transition of added element with position absolute
Get absolute position of a SVG element
Find the closest element with absolute position
JavaScript absolute position of element on images
Related Tags