css - 为什么向下滚动页面时绝对放置的元素向上移动，而固定位置的元素却不移动？

当我们为一个元素提供一个绝对值的位置属性时，它具有垂直和水平偏移（左下），它相对于具有相对位置属性的最接近的父元素定位。

如果没有父元素具有相对属性，则绝对定位的元素相对于浏览器窗口的位置。
固定定位的定义与它所说的完全相同：“固定定位是一种绝对定位，其中元素是相对于浏览器窗口定位的。”

我的主要问题是，当页面向下滚动时，为什么绝对定位的元素会向上移动，而当相对于浏览器窗口放置这两个元素时，为什么固定定位的元素却不会移动？

最佳答案

除非巧合，否则绝对定位的元素绝不会相对于浏览器窗口（即viewport）定位。在没有定位祖先的情况下，它们也不像w3schools那样相对于身体元素定位。它们也没有相对于html（即根）元素定位。

html {
  margin:20px;
  border :1px red solid;
  height:100px;
}
body {
  margin:30px;
  border :1px blue solid;
  height:90px;
}
div {
  border :1px green solid;
  height:155px;
  position:absolute;
  top:0;
  left:0;
}

<div>text</div>

如果绝对定位的元素没有祖先，则相对于initial containing block定位，canvas在上的左上角位于（0，0）。当滚动条在画布上移动视口时，绝对定位的元素将通过滚动相对于视口移动。

关于css - 为什么向下滚动页面时绝对放置的元素向上移动，而固定位置的元素却不移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50898676/