当我使用 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 中发现了这种行为。
最佳答案
当你应用 position:fixed
时,还要:
pin.addEventListener('click', function () {
myDiv.style.position = 'fixed';
myDiv.style.top = '50px';
myDiv.style.marginTop = '0';
});
*编辑*
默认情况下浏览器执行body{padding:5px;}
这就是为什么一个好主意是html5boilerplate your css's
*结束编辑*
出于某种原因(see explanation here) , margin-top 也插入了容器。应用 position:fixed
后,容器会弹回页面顶部(失去边距)并位于距页面顶部 5px 的位置。
在 position:fixed
之前
在 position:fixed
之后
关于javascript - 应用位置固定时元素改变位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23319889/