css定位机制

css定位机制有三种：文档流、浮动（float）、定位（position）

一、文档流（常规流）

什么是文档流

从直观上理解文档流（正常流）指的是元素按照其在HTML中的位置顺序决定排布的过程，主要形式是自上而下，一行接一行，每行从左到右的顺序排列页面元素。

文档流的类型

1.块级元素的块级格式
2.行内元素的行内格式
3.两种元素的相互定位方式

什么情况下会导致元素脱离文档流

• 浮动（float）
• 绝对定位(position:absolute\fixed)
  这两种的区别在于宽度缺失

由于使用了相对定位和绝对定位的元素都会产生宽度缺失,因此会造成层叠的情况。层叠顺序基本按照后者覆盖前者的顺序。但是如果要改变顺序的话,就需要使用z-index属性。

需要注意的是:z-index只有在position值为relative,absolute和fixed的元素上有效。而其比较的规则遵循“拼爹原则”,即先比较具有z-index属性的父辈元素,父辈元素z-index大的子辈元素都大。

但更需要注意的是:并非使用了absolute来进行定位就一定要设置z-index,大量的z-index会使项目无法维护

不脱离文档流的情况

• 块级
• 行内
• 相对定位
• 设置position：static可以取消继承，还原元素定位的默认

二、浮动（float ）

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
float会把浮动元素变成块级元素；
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

**clear 属性规定元素的哪一侧不允许其他浮动元素。
clear的值有以下几个：**

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧
both	在左右两侧均不允许浮动元素
inherit	规定应该从父元素继承clear属性的值

三、定位（position）

1. positon:static; 静态定位（默认的 ）

   　　所有标准文档流中的元素都是静态定位。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2. positon:relative; 相对定位

   　　不脱离标准文档流，“老家留坑，形影分离”。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

   　　特点：如果设置了相对定位并且设置了top、left、right、bottom属性，那么将来盒子会以盒子原来所在的位置进行偏移

   　　相对定位的用途：一般不用于做“压盖效果”，就两个作用：

   　　（1）微调元素

   　　（2）绝对定位的参考，子绝父相

   　　可以用left、right来描述盒子右、左的偏移；可以用top、bottom来描述盒子下、上的偏移

position：relative；
top：10px;
left：10px;   //相对于原来位置向右下移10px
position：relative;
top:-10px;
left:-10px;   //相对于原来位置向左上移10px

1. position:absolute; 绝对定位

   　　脱离标准文档流 。元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

   　　特点：（1）如果这个元素没有父元素，那么将来top、left、right、bottom是相对于浏览器窗口来定位的

   　　　　　（2）如果绝对定位的元素有父元素，但父元素没有相对定位，那么这个时候top、left、right、bottom还是相对于浏览窗口来定位的

   　　　　　（3）如果绝对定位的元素有父元素，而且父元素有定位（非static），那么这个绝对定位的元素偏移是以自己的父元素为基础

   　　　　　（4）绝对定位之后的元素在页面上不会占据位置

2. position:fixed; 固定定位

   　　脱离标准文档流。元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

   　　固定定位的用途：页面中的某些小广告，需要固定在页面中的一个位置不变

总结：将来在写页面的时候，用的最多的不是绝对定位也不是相对定位，而是绝对定位与相对定位一起使用.相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

规范：子绝父相（子元素使用绝对定位，父元素使用相对定位）