摘要：在中，元素的大小是不变的，通过设置等属性，改变元素相对于自身的位置。所以被的元素，是可能会和其他元素重叠的，但是不会对之后的元素的位置有影响。被称为绝对定位。绝对定位的元素是根据其决定的，完全脱离，对后续的兄弟节点的布局无任何影响。
花了一个周末的时间，把 css-postion 的标准读了一遍，把关于 Absolute 和 Relative 的部分的理解在这里记录一下。
Positioning schemes在 css 中，有三种定位方案:
Normal flow
Floats
Absolute positioning
Normal flow 是最常见的 BFC 和 IFC，也就是常说的块级元素从上到下，内联元素从左到右布局的情况；Floats 即常见的盒子水平布局的情况；Absolute positioning 让盒子完全脱离 Normal flow， 通过设置 top，left 等属性来决定 position。
注意：这里只说到 Floats 和 Absolute 是 out-of-flow 的，没有说 Relative。我看过很多文章都说 Relative 也让盒子脱离了流，是错误的说法（我就深受其害）。
Containing Blocks一个元素的盒子的位置和大小通常是由一个特定的矩形计算出来的，这个特定的矩形就是元素的 containing block。 对于 static 和 relative 的元素，它的 containing block 同普通盒子，一般是指包含它的最近的父级元素（nearest ancestor）。对于 fixed（不在这次文章之内，按下不表）和 absolute 有如下的表现:
containing block 被最近的positon不等于static的祖先元素创建:
如果最近的祖先元素是块级元素(block-level)，containing block 由盒子的内边距层(padding edge) 创建。
如果最近的祖先元素是内联级元素(inline-level)，那么containing block 由书写模式的 direction 属性决定。这种情况比较少用，不分析了。
如果没有祖先元素，或者祖先元素没有设置 position 为 static 以外的值，那么 containing block 就是 initial containing block。
注意：对于上面第三点，initial containing block 并不是指 body， 我看到很多文章都把这里说成 body。
Relative positioning相对定位：是相对于自己定位。在 normal flow 中，元素的大小是不变的，通过设置top等属性，改变元素相对于自身的位置。所以被 relative 的元素，是可能会和其他元素重叠的，但是不会对之后的元素的位置有影响。 一个相对定位的盒子会为后代节点创建一个新的绝对定位的 containing block。
Absolute positioning对于 position： absolute 和 position： fixed 都是指 Absolute positioning。 本文暂只讨论 position: absolute。 Absolute positioning 被称为绝对定位。 绝对定位的元素是根据其 containing block 决定的，完全脱离 normal flow， 对后续的兄弟节点的布局无任何影响。一个绝对定位的盒子会为后代节点创建一个新的绝对定位的 containing block 和为子节点创建一个 normal flow 的containing block
top, right, bottom, left当一个元素的 position 属性被设置了除 static 之外的值， 这个元素的位置可以被 top, right, bottom, left这四个物理属性决定。注意，在同时设置 left、right 或者 bottom、top 的时候会出现竞争情况。
结尾因为女朋友在学 css，需要我在旁指导 而 css 一直是我的弱项，所以我花了一个周末时间把 css-position 的标准梳理了下，这样指导起来也比较有底气。这篇文章基本都是对下面参考的链接的笔记，我之前学这部分的内容时，都是从网上找的别人的博客看的，有很多和标准出入的地方，这一天也解了不少的疑惑；如果有想学的同学，还请直接看 css-positon 的草案比较靠谱，而且草案中 example 也有不少。
参考:草案
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115068.html
摘要：当一个盒根据常规流或者浮动摆放好后，它可能会相对于该位置移动，这叫相对定位。 当一个盒根据常规流或者浮动摆放好后，它可能会相对于该位置移动，这叫相对定位。 相对定位的盒保持它在常规流中的大小，包括换行和空格都会原样保留 relative与absolute,fixed relative与absolute的关系 在例1中,absolute元素的top/left:0的定位在浏览器窗口的左...
摘要：并没有脱离普通流，只是视觉上发生的偏移。上面的案例中，将第二个子级元素换为内联元素，子元素下的起点位置并没有改变。 w3school过了HTML的知识之后，觉得要自己单纯地去啃知识点有点枯燥，然后自己也很容易忘记，所以便找具体的网站练手便补上不懂的知识点。position:relative和postion:absolute困扰了我快一个星期之久，网上找到的资料鱼龙混杂，刚确定这样的理解...
摘要：并没有脱离普通流，只是视觉上发生的偏移。上面的案例中，将第二个子级元素换为内联元素，子元素下的起点位置并没有改变。 w3school过了HTML的知识之后，觉得要自己单纯地去啃知识点有点枯燥，然后自己也很容易忘记，所以便找具体的网站练手便补上不懂的知识点。position:relative和postion:absolute困扰了我快一个星期之久，网上找到的资料鱼龙混杂，刚确定这样的理解...
摘要：总结一下定位相对于谁进行定位有点复杂就是找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位即定位的，那么就相对于它进行定位。当父元素链上所有父元素都是默认定位，那么定位就是相对于元素的，效果和定位差不多。 相信学过CSS的同学都曾经对于position的各种属性很困惑，尤其是absolute和relative定位，简直就是傻傻分不清，笔者写这篇文章就是希望通过代码实验的方...
摘要：在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。放置绝对定位对象在可视区域之外会导致滚动条出现。相对定位是相对于元素在文档流中初始位置的，而绝对定位是相对于最近的已经定位的祖先元素。 CSS2.0 HandBook上的解释： 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占...
阅读 2962·2021-10-15 09:41
阅读 1618·2021-09-22 15:56
阅读 2103·2021-08-10 09:43
阅读 3270·2019-08-30 13:56
阅读 1776·2019-08-30 12:47
阅读 646·2019-08-30 11:17
阅读 2768·2019-08-30 11:09
阅读 2190·2019-08-29 16:19
