为什么当我们向下滚动页面时，绝对放置的元素会向上移动，而固定位置的元素不会？

Question

当我们给一个元素一个具有垂直和水平偏移(例如底部和左侧)的位置属性绝对时，它是相对于位置属性为相对的最近父元素定位的。

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

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

Answer 1

绝对定位的元素永远不会相对于浏览器窗口(即viewport)定位，除非巧合。在没有定位祖先的情况下，它们也不是相对于body元素定位的，就像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>

​

如果一个绝对定位的元素没有定位的祖先元素，那么它相对于canvas上的左上角(0，0)的initial containing block进行定位。当滚动条在画布上移动视区时，绝对定位的元素通过滚动相对于视区移动。

Answer 2

以下是这些positions属性的工作原理的简短说明

Fixed Position相对于视口或浏览器窗口本身定位固定位置元素。当滚动窗口时，视区不会改变，因此当滚动页面时，固定定位的元素将保持在原来的位置

绝对位置

此属性有助于相对于位置为相对或绝对的父元素定位元素，如果没有这样的元素，它将根据浏览器窗口进行定位

Answer 3

绝对位置：

具有position: absolute；的元素相对于最近定位的祖先进行定位(而不是相对于视口定位，如fixed)。但是，如果绝对定位的元素没有定位的祖先，它将使用文档正文，并随页面滚动一起移动。

参考：https://www.w3schools.com/css/css_positioning.asp

因此，元素的基本绝对定位，当最近的父元素没有定义位置时，绝对定位的元素是相对于元素放置的，而不是相对于浏览器窗口。这使得它在滚动网页正文或浏览器窗口时滚动。