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

【问题标题】：Why the absolutely placed element moves up when we scroll down the page and fixed positioned element does not?为什么当我们向下滚动页面时绝对放置的元素会向上移动而固定定位的元素不会？
【发布时间】：2018-06-17 16:53:42
【问题描述】：

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

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

&lt;div&gt;text&lt;/div&gt;

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

【讨论】：

【解决方案2】：

以下是这些位置属性如何工作的简短说明

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

绝对位置

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

【讨论】：

【解决方案3】：

绝对位置：

具有位置的元素：绝对；相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。然而;如果绝对定位元素没有定位的祖先，它使用文档正文，并随着页面滚动而移动。

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

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

【讨论】：