定位体系（定位机制）

Posted 2020-12-04 shcrk

原文

　　简书原文：https://www.jianshu.com/p/65bfdbe42fb1

大纲

　　1、定位体系的意义
　　2、定位体系的分类
　　3、常规流：( Normal flow )
　　4、浮动（Floats）
　　5、绝对定位（Absolute positioning）
　　6、选择定位方案

1、定位体系的意义

　　CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。CSS2.1中的定位体系帮助作者使他们的文档更容易理解，并不需要使用标记的手段（如，不可见的图片）达到布局的效果。
　　格式化上下文决定了可视化格式模型中框的形式，定位体系布局决定了这些框在页面中如何布局。

2、定位体系的分类

　　元素在布局时，根据3种定位体系定位。分别是，常规流、浮动和绝对定位。

3、常规流：( Normal flow )

　　常规流，是对 normal flow的直译。
　　流者，动也。偏旁是三点水，说明，跟水有关系，水的流动是连续不间断的，也是有先后顺序的。在这里，我们把它当作可以流动的(位置可变)，有先后顺序(元素顺序加载)的体系。在文档加载的时候，好像流水似的，一点点的漫过整个画布。还有一种说法是，浏览器在解析html CSS JS 的时候的一个流式的过程，从html起始标签开始 到html结束标签截止。

　　之所以是常规，是因为，这是相对于后面的浮动和定位的一个概念，浮动和定位元素都脱离了当前的常规流。
　　在 CSS2.1中，常规流包括块框(block boxes)的块格式化(blok formatting 后续会讲到)，行内框(inline boxes)的行内格式化(inline formatting 后续会讲到)，块框或行内框的相对定位，以及插入框的定位。

　　在 CSS 中，元素定义的环境有两种，一种是块格式化上下文( Block formatting context )，另一种是行内格式化上下文( Inline formatting context )。 这两种上下文定义了在 CSS 中元素所处的环境，格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即在常规流中的框，都属于一个格式化的上下文中等。

4、浮动（Floats）

　　浮动，顾名思义，相对于常规流来讲，它漂浮在常规流的上方。因为它不再处于文档流中，所以它不占据空间。
　　在浮动模型中，一个框(box)首先根据常规流布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以沿浮动区的侧面排列。因为它首先要根据常规布局后才偏移，所以效率较常规流低。
　　用 ‘float’ 特性声明浮动，特性值可以是：”none”、”left”、”right”。

5、绝对定位（Absolute positioning）

　　在绝对定位模型中，一个框(box)整个地从常规流向中脱离（它对后续的兄弟元素没有影响），并根据它的包含块来分配其位置。

6、选择定位方案

　　‘float’和’position’特性决定了使用哪种CSS2.1定位算法来计算框的位置。
　　不同的position选择不同的定位算法。

6.1、static

　　该框(box)是一个常规框，布局根据常规流。‘left‘ 、’right’、’bottom’和 ‘top‘属性不适用。
　　如果 ‘position’没有设置，默认值也是’static’。这时，设置‘left‘ 、’right’、’bottom’和 ‘top’，无效。

6.2、relative

　　框的位置根据常规流计算（被称为常规流中的位置）。然后框相对于它的常规位置而偏移。如果框 B 是相对定位的，其后框的定位计算并不考虑 B 的偏移。 table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, 和 table-caption 元素的 ‘position:relative’ 效果没有被定义。
　　相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
　　在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

<div style="position:static; width:100px;">
    <div id="A" style="background-color:green;">A</div>
    <div id="B" style=" position:relative; top:10px; left:10px; background-color:red;">B</div>
    <div id="C" style="background-color:blue;">C</div>
</div>

6.3、absolute

 　　元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

 　　框的位置（可能还有它的尺寸）是由’left’，’right’，’top’和’bottom’特性决定。这些特性指定了框相对于它包含块的偏移量。 绝对定位（”position: absolute”）元素的包含块由离它最近的 ‘position’ 属性为 ‘absolute’、’relative’ 或者 ‘fixed’ 的祖先元素创建。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。根据用户的代理不同，最初的包含快可能是画布或HTML元素。

 　　绝对定位的框从常规流向中脱离。这意味着它们对其后的兄弟元素的定位没有影响。另外，尽管绝对定位框有外边距(margin)， 它们不会和其它任何外边距发生折叠（Collapsing margins）。
　　因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

<div style="position:absolute; width:300px; border:2px solid yellow;">
    <div id="A" style="background-color:green; height:50px;">A</div>
    <div id="B" style="position:absolute; top:70px; left:50px; height:50px; background-color:red;">B</div>
    <div id="C" style="background-color:blue; height:50px;">C</div>
</div>

6.4、fixed

　　框位置的计算根据‘absolute‘模型，不过框要额外地根据一些参考而得到固定。跟绝对定位一样，fixed定位元素的margin不会和任何其他 margin发生margin折叠。应用于手持终端、投影设备、屏幕、TTY、电视媒体类型时，框相对于 viewport 固定，滚动时不移动。应用于打印媒介类型时，框被渲染于每一页，并相对于页框固定，就好象是通过viewport查看该页一样（例如，打印预览）。对于其他的媒介类型，表现没有被定义。

 参考网址

http://www.html5jscss.com/box-context.html
http://bbs.csdn.net/topics/340223607
http://blog.csdn.net/syf19720428/article/details/51993072