應用位置固定時，元素會發生變化

Question

當我應用position: fixed用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你的css的

*結束編輯*

出於某種原因（見此處的解釋） ，margin-top也用它推了容器。 一旦應用position:fixed ，容器彈回到頁面頂部（丟失邊距）並且位於距頁面頂部5px處。

在position:fixed之前position:fixed

position:fixed后position:fixed

Answer 2

只需將其添加到您的CSS：

body {
    margin:0;
    padding:0;
}

這將阻止瀏覽器默認添加的額外填充。