CSS 定位

在了解 CSS 定位之前，先问个问题，CSS 布局和定位有什么区别？

区别大了！！

布局是屏幕平面上的，定位是垂直于屏幕的。

这还要从盒模型和文档流开始说起

盒模型

盒模型什么样的？从外面到里面依次是：

1. margin
2. border
3. padding
4. content

第一种盒模型，浏览器算的宽度是 内容宽度

box-sizing:content-box;

第二种盒模型，浏览器算的宽度是 border+padding+内容宽度

box-sizing:border-box;

文档流

标准文档流

元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。

正常文档流的元素是怎么垂直于屏幕分层的呢？从上向下一次是？

1. 内联子元素
2. 块级子元素
3. border
4. background

那脱离文档流的元素呢？

先了解下，CSS中哪些属性会让元素脱离文档流

1. float
2. absolute
3. fixed

在脱离文档流元素的影响下，新的垂直于屏幕分层情况如下：

1. 定位元素
2. 内联子元素
3. float
4. 块级子元素
5. border
6. background
7. z-index 为负数