CSS学习笔记——传统定位篇

1. 标准流（文档流）

在没有使用任何定位和浮动情况下，Html中块元素从上到下排布（每个块独占一行，自带换行），内联元素从左到右排布。

2.几种常见定位

1、静态定位（static）
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

 静态定位的元素不会受到 top, bottom, left, right影响。

2、绝对定位（absolute）
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。

另外，absolute定位也必须搭配top、bottom、left、right这四个属性来定位。

3、相对定位（relative） 
relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

4、固定定位（fixed)
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

5、粘性定位（sticky）
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。

6、浮动定位（float）

float 属性定义元素在哪个方向浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素（html大部分元素都是不可替换元素），则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

3、对比：（精华！！！！要理解透！！）

不脱标元素：静态定位的元素和相对定位元素占在标准流中的空间（相对定位元素在）。

	是否在标准流中	能否使用top、bottom、left、right	是否还占标准流的空间	在未使用top等定位下元素的位置变化	top、bottom、left、right定位的基点（参照点）
静态定位（static）	在标准流中	不能使用top、bottom、left、right	占空间	默认标准流位置	/
绝对定位（absolute）	脱离标准流	必须使用top、bottom、left、right	不占空间	紧邻最近不脱标的元素	父元素不是stastic就为父元素否则就是html根元素
相对定位（relative）	在标准流中	必须使用top、bottom、left、right	占空间	紧邻最近不脱标的元素	基点为最近不脱标的元素位置
固定定位（fixed)	脱离标准流	可以使用top、bottom、left、right	不占空间	紧邻最近不脱标的元素	基点是浏览器窗口
浮动定位（float）	脱离标准流	不能使用top、bottom、left、right	不占空间	紧邻最近不脱标的元素	/