应用位置固定时，元素会发生变化

Question

当我使用Javascript应用position: fixed时，我的元素向下移动几个像素并在另一个位置固定，一些像素向下，而不是只停留在原处。

为什么会这样？

// html
<div id="container">
    <div id="myDiv"></div>
</div>

// CSS
#container {
    height: 2000px;
}
#myDiv {
    margin-top: 50px;
    width: 100px;
    height: 50px;
    background-color: #88a;
}

// Javascript
myDiv.style.position = 'fixed';

我至少在Chrome和FF中发现了这种行为。

http://jsfiddle.net/bSM8h/

Answer 1

当您申请position:fixed时，也请执行：

pin.addEventListener('click', function () {
    myDiv.style.position = 'fixed';
    myDiv.style.top = '50px';
    myDiv.style.marginTop = '0';
});

http://jsfiddle.net/bSM8h/2/

*编辑*

默认情况下，浏览器执行body{padding:5px;}，这就是html5boilerplate your css's

的好主意

*结束编辑*

由于某种原因(see explanation here)，margin-top也用它推了容器。一旦应用position:fixed，容器就会弹回到页面顶部（丢失边距），并且距离页面顶部5px。

在position:fixed

之前

在position:fixed

之后

Answer 2

只需将其添加到您的CSS：

body {
    margin:0;
    padding:0;
}

这将阻止浏览器默认添加的额外填充。