Question

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

注意：我不能使用任何框架，只需简单的JS。

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

Answer 1

这很简单，但在IE7中不起作用。您可以使用position:fixed来定位与视口相关的元素（浏览器边缘），无论边距，填充或其他任何父元素都有。

使用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.

另外，你真的不需要JS。简单的旧HTML + CSS也可以做到这一点。了解有关CSS的更多信息position:fixed; HERE

Answer 2

您只需将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 3

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

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

这假设您的css不是为身体添加边距。

Answer 4

哎呀 - 无论如何我在jQuery中这样做了 - 我将把它留待将来参考。希望downvoters也可以离开它

适用于Chrome，Fx，IE8，IE9

DEMO

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

这意味着你可以做到

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

如何使用JS将html元素放在一些绝对坐标中，而不管体型（位置，边距）如何？

4 个答案: