如何在特定坐标中定位DIV？

Question

我想将DIV放在特定的坐标中？我怎么能用Javascript做到这一点？

Answer 1

将其属性left和top属性分别编写为左边缘和上边缘的像素数.它必须有position: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

或者将其作为一个功能,以便您可以将它附加到像这样的事件 onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

Answer 2

您不必使用Javascript来执行此操作.使用普通的CSS:

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

如果你觉得你必须使用javascript,或者试图动态地使用JQuery,这会影响类"blah"的所有div:

var blahclass =  $('.blah'); 
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it

或者,如果你必须使用常规的旧javascript,你可以通过id抓取

var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever 
domElement.style.left = 0; // or whatever

Answer 3

好吧,这取决于你想要的只是一个div而不是别的,你不需要使用java脚本.您只能通过CSS实现此目的.重要的是相对于你想要放置你的div的容器,如果你想将它相对于文件主体定位那么你的div必须是绝对定位的,它的容器不能相对或绝对定位,在这种情况下你的div将被定位相对于容器.

否则使用Jquery如果要相对于文档定位元素,可以使用offset()方法.

$(".mydiv").offset({ top: 10, left: 30 });

如果相对于偏移父位置,父相对或绝对.然后使用以下......

var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';

$('.mydiv').css({
  position:'absolute',
  top:top,
  left:left
});