Javascript 应用“固定位置”时，图元会更改位置

当我使用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';

//html
//CSS
#容器{
高度：2000px；
}
#myDiv{
边缘顶部：50px；
宽度：100px；
高度：50px；
背景色：#88a；
}
//Javascript
myDiv.style.position='fixed'；

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

---

当您应用

位置：固定时，还应执行以下操作：

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


*编辑*

默认情况下，浏览器执行
body{padding:5px；}
这就是为什么

*结束编辑*

出于某种原因，边距顶部也用它推动容器。一旦应用
位置：固定
，容器会弹回到页面顶部（失去页边空白），并定位在距页面顶部5px的位置

前
位置：固定


后
位置：固定

只需在CSS中添加以下内容：

body {
    margin:0;
    padding:0;
}

这将防止浏览器默认设置添加额外的填充。
感谢您的反馈。是的，我对你提到的“出于某种原因”部分最感兴趣。重置身体时不会出现此问题（例如：100%在鼻子上！）默认情况下，正文的
填充为5px
。因此#容器位于页面顶部5px处（请参见img2）。这就是为什么使用
normalize/reset css