javascript - 无论使用JS的正文样式（位置，边距）如何，如何将html元素放置在某些绝对坐标中？

Question

我正在尝试将一个元素放置在距视口顶部边框一定数量的像素处的网站中。问题是尽管使用了绝对定位，定位仍然取决于体型。例如，如果 body 具有相对定位和 margin top 值，那么我的绝对定位元素的位置将增加 body margin top 值。那么，我怎样才能让它独立于体型呢？

注意：我不能使用任何框架，只能使用普通的 JS。

更新：我希望位置受到滚动的影响，因此“固定”定位不是一种选择。我也希望它是跨浏览器。

Answer 1

您只需设置position为fixed.

var div = document.createElement("div");
div.style.position = "fixed";
div.style.top = "0";
div.style.left = "0";
div.appendChild(document.createTextNode("Some Text"));
document.getElementsByTagName("body")[0].appendChild(div);

Answer 2

It's quite simple, however it won't work in IE7. You can use position:fixed to position an element in relation to the viewport(browser edges), regardless of what margins, padding or whatever else parent elements have.

To do this with javascript:

var container = document.getElementById('container');// This is your container. Replace accordingly.
var elementToInsert = document.createElement("div");// Create a new element.
elementToInsert.style.position ='fixed';// It will now position in relation to the viewport, regardless of where it is nested, etc.
elementToInsert.style.top = '100px';// Always add pixels, won't work otherwise.
elementToInsert.style.left = '300px';// Always add pixels, won't work otherwise.
elementToInsert.style.width = '500px';// Always add pixels, won't work otherwise.
elementToInsert.style.height = '500px';// Always add pixels, won't work otherwise.
container.appendChild(elementToInsert);// Append the new div to the container.

Also, you don't really need JS for this. Plain old HTML + CSS will do the trick just as well. Read more about CSS position:fixed; HERE

Answer 3

Web 开发人员用来消除浏览器之间差异的一个技巧是使用 css 文件来重置诸如正文边距之类的属性。

此处示例：http: //meyerweb.com/eric/tools/css/reset/

这假设它不是您的 CSS 向正文添加边距。

Answer 4

糟糕——无论如何我都是在 jQuery 中完成的——我将把它留作将来参考。希望downvoters也可以离开它

这适用于 Chrome、Fx、IE8、IE9

演示

$(function() {
  $("img").on("click",function() { 
    $(this).offset({top:0,left:0}); 
  });
});    

​这意味着你可以做

$(function() {
  $("#myimg").offset({top:0,left:0}); 
});