最近在慕课网学习了 网页布局基础 和 固定层效果 ，都是由声音甜美的 婧享人生 老师所录制，视频详细讲解了CSS中position的用法，在此把学习笔记分享给大家。
CSS定位机制
标准文档流（Normal flow）
浮动定位（Floats）
绝对定位（Absolute positioning）
标准文档流
从上到下，从左到右，输出文档内容
由块级元素和行级元素组成
块级元素
从左到右撑满页面，独占一行
触碰到页面边缘时，会自动换行
常见的标签有：div、ul、li、di、dt、p
行级元素
能在同一行内显示
不会改变HTML文档结构
常见的标签有：input、span、label、strong、img
盒子模型
边框（border）
外边距（margin）
内边距（padding）
盒子中的内容（content）
盒子模型尺寸=边框+外边距+内边距+盒子中内容的尺寸
盒子3D模型
第一层：border
第二层：content + padding
第三层：background-image
第四层：background-color
第五层：margin
浮动定位
三个属性：left（左浮动）、right（右浮动）、none（不浮动）
元素会左移、或右移、直到碰到容器为止
虽然脱离了标准文档流，但情况有些特殊，详情见CSS基础知识之float
清除浮动的常用方法
clear属性，常用clear:both;（当父包含块缩成一条时无效）
同时设置width:100%（或固定宽度）+overflow:hidden;
相对定位
相对于自身原有位置进行偏移
仍处于标准文档流中
随即拥有偏移属性和z-index属性
绝对定位
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
绝对定位-偏移参考基准
未设置偏移量时，无论是否存在已定位的祖先元素，都保持在元素初始位置
已设置偏移量时，无已定位祖先元素，以<html>为偏移参考基准
已设置偏移量时，有已定位祖先元素，以距其最近的已定位祖先元素为偏移参考基准
绝对定位-常见问题
没有设置宽度时，元素的宽度根据内容进行调节
左右布局时，柱子层的高度，一定要大于绝对定位元素的高度
固定定位（也属于绝对定位）
位置固定，不会随滚动条变化
被他遮盖的元素，可以从其下层穿过
固定定位-偏移参考基准
未设置偏移量时，无已定位祖先元素，以浏览器窗口为基准定位
未设置偏移量时，有已定位祖先元素，以祖先元素为基准定位
已设置偏移量时，无论是否存在已定位的祖先元素，均以浏览器窗口为基准定位
欢迎来到 石佳劼的博客，如有疑问，请在「原文」评论区 留言，我会尽量为您解答。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。