CSS入门9-定位机制

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 简介

我们之前谈到了盒模型，那么这若干个盒子是怎么堆砌成一个完整的网页呢？

主要有三种定位机制：普通流，浮动和绝对定位。我们仍然以队形为例来讲解这三种定位机制。

2. 普通流

最普通的站队方式是怎样的呢，一般是站成几排几列。从前到后，从左到右依次排列。普通流就是这样的，块级元素从上到下，行内元素从左到右依次排列。至于块级元素和行内元素的区别和定义我们会在下一章详细讲解。

3. 定位

默认的队形站好了，教官还可以通过喊口号来改变队伍的队形。CSS也提供了position属性，控制队伍的定位。

1. static 默认定位，元素框按照块级元素从上到下，行内元素从左到右依次排列，在普通文档流中。就是最原始的队形。
2. relative 相对定位，元素相对static的位置偏移某个距离，但他原来的位置仍保留，在普通文档流中。就好比教官喊，XX出列，向前一步，向右三步走。这时候你人不在原本的位置了，但你本来的位置仍然保留了。
3. absolute 绝对定位，元素相对其非static定位的第一个祖先元素（包括父元素）进行定位，若没有该类祖先元素，则会相对body进行定位。其原来的位置不存在了，通过 "left", "top", "right" 以及 "bottom" 属性进行定位，脱离了普通文档流。就好比教官喊XX出列，后续同学补齐XX位置，XX仿佛不存在于原队伍中一样。然后命令XX相对于其非static的大集体，靠左多少步，靠上多少步站位。站位以后可能会与原队友位置重叠，谁露出，由z-index属性决定。（具体的覆盖规则可以看CSS入门11-定位与覆盖）
4. fixed 固定定位，元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身，脱离了普通文档流。就是仍然是自由人，但是你的位置是相对于整体队伍所在的场地来定义的。

4. 浮动

浮动的元素，就是从原文档流将该元素框拿出来向左或是向右滑动，直到碰到另一个浮动框或者边缘为止。就好比教官说第二排，向左浮动，第二排就会从队伍中出来，和第一排重合，第三排往后都往前一排走。如果命令每一排都向左浮动，则所有队伍站成了一排。

参考：

CSS 定位 (Positioning)

脱离文档流分析

css定位流布局

CSS中的三种基本的定位机制（普通流、定位、浮动）

CSS定位的三种机制：普通流、绝对定位和浮动

html/css基础篇——DOM中关于脱离文档流的几种情况分析

CSS position绝对定位absolute relative

CSS绝对定位absolute详解