8-1 定位

**普通流和浮动无法覆盖图片和文字**

（承上启下）

用以前的普通流（normal-flow）和浮动（float），很难做出盖住图片和文字的效果。

** 因为在这两种情况下，图片和文字是无法被覆盖住的。** 

也做不出盒子固定在屏幕某个位置的效果。（比如淘宝的头部搜索盒子和页面右侧的固定盒子）

 

定位，其实就是将盒子定在某一个位置，自由的漂浮在其他盒子（包括普通流和浮动）的上面。

可以联想：

• 在海底的是普通流
• 在海面上的是浮动的盒子
• 在天空中的是定位的盒子

定位由两部分组成：定位模式 + 边偏移，一般两者缺一不可。

　　边偏移：top | bottom | left | right　　分别对应元素相对于其父元素上、下、左、右边线的距离。

　　定位模式（position）：4个值　　static（静态定位） | relative（相对定位） | absolute（绝对定位） | fixed （相对定位）

　　　　语法：

　　　　　　选择器 { position: 属性值; }

　　　　18.1 静态定位：

1. 1. 静态定位是元素的默认定位方式，无定位的意思。
   2. 静态定位 按照普通流特性摆放位置，它没有边偏移。
   3. 静态定位在布局时几乎不用。

　　　   18.2 相对定位：

1. 1. 相对定位是元素相对于它自身原来在普通流中的位置来说的。　
   2. **原来在普通流中的位置继续占有**，后面的盒子仍然以普通流的方式对待他。

　　　　18.3 绝对定位：（这里的父级可以是子孙关系。）

1. 1. 普通流的子盒子总是以父级为准移动位置。
   2. 如果父盒子没有定位，绝对定位的子盒子 以浏览器为准移动位置。
   3. 如果父盒子有定位，绝对定位的子盒子 以父盒子为准移动位置。
   4. **不保留原来的位置，完全脱离普通流**。 
   5. 其实绝对定位，就是向上找距离它最近的包含块（container-block）。父亲没有定位（当然这个定位不包括static），找爷爷，爷爷没有定位找太爷爷，太爷爷没有定位找太太爷爷...

　　　　  18.4 固定定位：（它是绝对定位的一种特殊形式）

1. 1. 完全脱离普通流，完全不占位置；
   2. 只认浏览器的viewport；
      • 跟父元素没有任何关系。
      • 不随滚动条滚动。　　
   3. 如果父盒子有定位，固定定位的子盒子 没有任何影响，只认viewport。　
   4. IE6 等低版本浏览器不支持。　　　

 

 

 

 所以固定定位，他就是孙猴子，他谁的儿子也不是，他是石头里蹦出来的！