##CSS 定位机制##
CSS 有三种基本的定位机制：普通流、浮动流和定位流。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
##什么是CSS 定位 (Position) ？##
属性允许你检索和设置对象的定位方式
CSS 为定位提供了一些属性值，可以将布局的一部分与另一部分重叠。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
##CSS 定位都有哪几种以及之间的区别 ？##
1、static 默认值
相当于普通流；没有定位；
作用：可以用于取消元素之前的定位设置
2、relative 相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
参照物：自己所在的位置
特点：
a：如果没有定位偏移量，对于元素本身没有任何影响
b：不使元素脱离文档流，空间是会被保留的
c：不影响其他元素布局
d：left，top，right，bottom是相对于当前自身进行便宜的，不能独立存在，必须配合定位使用
3、absolute 绝对定位
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
参照物：
a：可视窗口：浏览器第一屏（默认情况下）
b：有设置定位的最近父元素
特点：
a：使元素完全脱离文档流
b：使内联元素支持宽高（让内联元素具备块特性）
c：使块元素默认宽根据内容决定（让块具备内联的特性）
d：如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。
案例：图片上叠加说明文字
<div class="father"> <img src="pic.jpg" /> <div class="son">图片上的文字说明</div> </div>
.father{ positon: relative; } .son { position: absolute; bottom：0px; left:0px; width:100%; background:rgba(0,0,0,0.5); color:#ffffff; }
案例效果：
4、fixed 固定定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
参照物：
a：始终都是相对于整个浏览器窗口进行固定定位
特点：
a：使文档完全脱离文档流
b：使内联元素支持宽高（让内联具备内联块的特性）
c：使块元素默认宽根据内二公决定（让块具备内联块的特性）
d：相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到祖先元素的影响。
案例：点击出现弹，位置水平垂直居中且固定不动
<div class="popup"> <div class="pop_body">...</div> </div>
.popup{ width:300px; height:400px position: fixed; left:50%; top:50% margin-left:-150px; margin-top:-200px; }
案例效果：
5、粘性定位 position：sticky；（css3新增属性，兼容性比较差）
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。
参照物：
a：在固定的时候：参照物是相对于整个浏览器窗口
特点：
a：相对定位和固定定位的结合体；
b：在没有到达指定位置的时候，是没有定位效果的（相当于相对定位）；在到达设定的位置的时候 是固定定位；
c：在固定的时候：参照物是相对于整个浏览器窗口
生效规则：
position:sticky 的生效是有一定的限制的，总结如下：
a、须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
b、设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
· 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
· 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
c、达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。
案例：实现导航的吸顶效果（头部导航条固定）
#toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 100px; }
案例效果：（初始效果）
案例效果：（滑动之后效果）
##定位的作用##
a、在正常情况下，可以让一个元素覆盖在另外一个元素上面
b、可以移动一个元素的位置
c、可以固定某个容器在浏览器窗口的某个位置不动。
d、可以做吸顶效果，比如百度新闻的导航
##相对定位和绝对定位的区别##
a、 相对定位的参照物是自己本身所在的位置，
绝对定位的参照物是包含块
b、 相对定位是不会脱离文档流的，而且不对页面布局产生影响；
绝对定位是会脱离文档流的，原来的位置不在占有，后面的内容会把位置补上去
##绝对定位和固定定位之间的相同点和不同点##
相同点：
都会脱离文档流，并且都定位之后，结构在后面的元素会覆盖在最上面，都可以通过z-index来改变层叠顺序，也可以都用left top right bottom移动位置
不同点：
a、参照物不同
绝对定位的参照物有2个，A是浏览器的第一屏 B就是有定位的父元素
固定定位的参照物只有1个，是浏览器的当前窗口。
b、固定定位之后该元素就固定在某个位置了，拖动窗口的时候，不再改变
##层叠顺序z-index##
检索或设置对象的层叠顺序
注：他只针对于定位属性的元素起作用
a：auto 自动，默认的
b：number 数值越大，层越上
没有设置z-index时，最后写的对象优先级先显示在上层，设置之后，数值越大，层越上
##包含块的概念##
a、包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照 物，即确定绝对定位的偏移起点和百分比 长度的参考；
b、绝对定位元素会根据包含块进行绝对定位，
默认情况下 ，浏览器的可视窗口是一个大的包含块，
默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；
如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。
c、怎么给他的祖先级元素定义成包含块： 给祖先级元素添加position：relative/absolute/fixed。