如何定位一个DIV在一个特定的坐标?

I want to position a DIV in a specific coordinates ? How can I do that using Javascript ?

我想把DIV放在一个特定的坐标里?如何使用Javascript实现这一点?

6 个解决方案

#1

119

Script its left and top properties as the number of pixels from the left edge and top edge respectively. It must have position: absolute;

将它的左和上属性分别表示为来自左边缘和上边缘的像素个数。它必须有立场:绝对;

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

Or do it as a function so you can attach it to an event like onmousedown

或者把它作为一个函数来执行，这样就可以将它附加到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';
}

#2

You don't have to use Javascript to do this. Using plain-old css:

你不需要使用Javascript来实现这一点。使用css比较:

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

If you feel you must use javascript, or are trying to do this dynamically Using JQuery, this affects all divs of class "blah":

如果您觉得必须使用javascript，或者正在尝试使用JQuery动态地进行此操作，那么这将影响到所有“blah”类的div:

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

Alternatively, if you must use regular old-javascript you can grab by id

另外，如果您必须使用常规的老式javascript，可以通过id获取

document.getElementById('myElement').style.position = "absolute";
document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

#3

well it depends if all you want is to position a div and then nothing else, you don't need to use java script for that. You can achieve this by CSS only. What matters is relative to what container you want to position your div, if you want to position it relative to document body then your div must be positioned absolute and its container must not be positioned relatively or absolutely, in that case your div will be positioned relative to the container.

这取决于你是否想要定位一个div然后没有别的，你不需要使用java脚本。您只能通过CSS实现这一点。重要的是相对于div容器你想什么位置,如果你想要的位置相对于文档主体然后div必须绝对定位和它的容器不能定位相对或绝对的,在这种情况下你的div将定位相对于容器。

Otherwise with Jquery if you want to position an element relative to document you can use offset() method.

否则，使用Jquery，如果您希望将元素定位到相对于文档的位置，可以使用offset()方法。

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

if relative to offset parent position the parent relative or absolute. then use following...

如果相对于偏移父位置，父相对或绝对。然后使用以下…

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

#4

You can also use position fixed css property.

您还可以使用位置固定css属性。

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

#5

Here is a properly described article and also a sample with code. JS coordinates

这是一篇恰当描述的文章，也是一个带有代码的示例。JS坐标

As per requirement. below is code which is posted at last in that article. Need to call getOffset function and pass html element which returns its top and left values.

按要求。下面是文章最后发布的代码。需要调用getOffset函数并传递返回其顶部和左侧值的html元素。

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

#6

I cribbed this and added the 'px'; Works very well.

我把它剪短，加上px;工作得很好。

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +'px',
    top: (el.top + window.scrollY ) +'px'
  }
}
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ;

#1

119