Question

当我们为一个元素赋予一个绝对的position属性以及一个垂直和水平偏移（ex bottom，left）时，它相对于具有position属性的最近的父元素定位。

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

我遇到的主要问题是当页面向下滚动时绝对定位元素向上移动的原因以及当它们都相对于浏览器窗口放置时固定定位元素不会移动。

Answer 1

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

＆＃13;

[{'I19': {'BIRT': '13 FEB 1981', 'sex': 'M', 'id': 'I19', 'family': 'F23', 'name': 'Dick /Smith/'}}, {'I26': {'BIRT': '2 JUN 1983', 'sex': 'F', 'id': 'I26', 'family': 'F23', 'name': 'Jane /Smith/'}}, {'I07': {'BIRT': '23 SEP 1960', 'sex': 'F', 'id': 'I07', 'family': 'F23', 'name': 'Jennifer /Smith/'}}, {'I01': {'name': 'Joe /Smith/', 'family': 'F23', 'BIRT': '15 JUL 1960', 'sex': 'M', 'id': 'I01', 'DEAT': '31 DEC 2013'}}, {'I30': {'BIRT': '3 SEP 1993', 'sex': 'F', 'id': 'I30', 'family': 'F16', 'name': 'Mary /Test/'}}, {'I32': {'BIRT': '27 MAY 1991', 'sex': 'M', 'id': 'I32', 'family': 'F16', 'name': 'Nick /Tary/'}}]

＆＃13;

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;
}

＆＃13;

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

Answer 2

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

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

绝对位置

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

Answer 3

绝对位置：

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

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

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

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

3 个答案: