摘要：文档流简单说就是元素按照其在中的位置顺序决定排布的过程。只要不是和绝对定位方式布局的，都在文档流里面。位置设置为的元素，它始终会处于文档流给予的位置。但是，当注释代码取消注释生效后，就会相对文档流中应当呈现的位置进行移动。
1.文档流
简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。HTML的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）不独占一行。
一般使用margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“距离”。只要不是float和绝对定位方式布局的，都在文档流里面。
static，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。
inherit，规定应该从父元素继承 position属性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
fixed，生成绝对定位的元素。默认情况下，可定位于相对于浏览器窗口的指定坐标。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
absolute，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。
此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
relative，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。
通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。
relative生成相对定位的元素，相对于其正常位置进行定位。
相对定位完成的过程如下：
按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。
其中box2中的注释代码未生效前，是按照文档流进行排序呈现。
但是，当注释代码取消注释生效后，就会相对文档流中应当呈现的位置进行移动。
所以，相对定位的参照物是它本身。
绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物则需要根据它祖先元素的定位设置来确定。
所谓根据它祖先元素的定位设置来确定简单理解为：相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是body层。
在祖先元素没定位的情况下，使用absolute。在这种情况下，参考物就是body。
祖先元素有定位，祖先元素只要设置了值不为position:static之外的值，都视为有定位，并且最近的祖先元素会被设置为绝对定位元素的参照物。在这种情况下，参考物就是最近的祖先元素。
在没设置left/right、top/bottom的情况下，absolute元素的位置就是该元素在文档流里的位置
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113055.html
摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。 这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...
摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。 这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...
摘要：注意当该固定元素的祖先元素的属性非时，容器由浏览器窗口改为该祖先元素粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。理论上来说，全部 position 的取值有8个 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。 文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用：CSS 框模型概述 CSS 框模...
摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。 文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用：CSS 框模型概述 CSS 框模...
阅读 1353·2021-11-25 09:43
阅读 3564·2021-11-10 11:48
阅读 4921·2021-09-23 11:21
阅读 1580·2019-08-30 15:55
阅读 3490·2019-08-30 13:53
阅读 1196·2019-08-30 10:51
阅读 819·2019-08-29 14:20
阅读 1954·2019-08-29 13:11
