javascript - 应用位置固定时元素改变位置

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 之后