· 定位就是将盒子定在某个位置。定位=定位模式+边偏移。所谓的定位模式，决定元素的定位方式。通过CSS的position属性来设置，他的值可以分为四种：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。所谓的边偏移即定位了盒子移动到最终的位置，有top、bottom、left和right四个属性。分别具有以下含义：
| 边偏移属性 | 实例 | 描述 |
| top | top：50px; | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom：50px; | 底端偏移量，定义元素相对于其父元素下边线的距离 |
| left | left：50px; | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right：50px; | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
静态定位
静态定位就是默认定位方式，无定位的意思。语法如下：
选择器{position：static}；静态定位按照标准流特性摆放位置，没有边偏移。而且在设计过程中很少用到静态定位。
相对定位
相对定位就是元素移动的时候，相对于原来的位置来说的（俗称自恋型定位）；语法如下;
选择器{ position：relative； }
其特点：
1）是相对于自己原来的位置来移动的（移动的时候参照自己原来的位置）
2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保持原来的位置）。
绝对定位
绝对定位是元素在移动位置的时候，相对于祖先元素（有爹拼爹，没有爹拼爷爷，没有祖先则以浏览器为准）来说的（俗称拼爹型）。
语法格式：
选择器{ position：absolute； }
绝对定位的特点：
1）、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（也就是document文档）。
2）、如果祖先元素没有因为（相对、绝对、固定），则以最近一级有定位祖先元素为参考点移动位置。
3）、绝对定位不再占有原先的位置。（脱标）
关于子绝父相
子绝父相（子级使用绝对定位，父级使用相对定位）。
1）子级绝对定位，不会占有位置，可以放到父盒子里面任何一个位置，不会影响其他兄弟盒子
2）父盒子需要定位限制子盒子在父盒子内显示
3）父盒子布局是，需要占有位置，因此父亲只能是相对定位。
相对定位经常用来作为绝对定位的父级。因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，当然子绝父相也不是绝对的，如果父元素不需要占有位置，子绝父绝也会遇到的。
固定定位
固定定位是元素固定在浏览器可视区域位置，主要应用场景是页面滚动时元素的位置不会改变。语法如下：
选择器{ position：fixed； }定位的特点：（务必记住）
1.以浏览器的可视窗口为参照点移动元素跟父元素没有任何关系，不随滚动条移动
2.固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的地绝对定位。固定定位的小技巧：固定在版心右侧位置：
/*设置盒子的大小*/ .box { width: 800px; height: 1000px; background-color: #8bd3af; margin: auto; } .circlefix { /*设置固定定位*/ position: fixed; left: 50%;/*设置定位的盒子走到浏览器可视区的一半位置*/ margin-left: 400px;/*在设置margin-left多走版心宽度的一半*/ top: 450px; width: 80px; height: 100px; background-color: #5e6662； }效果如下：
粘性定位
可以认为是相对定位和固定定位的混合：语法如下：
选择器{ position：sticky； top：10px; }粘性定位的特点
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加top、left、 right、 bottom其中一个才有效
定位的总结
定位的总结 定位模式 是否脱标 移动位置 是否常用 static 否 不能使用边偏移 很少 relative 否（占有位置） 相对于自身位置移动 常用 absolute 是（不占有位置） 带有定位的父级 常用 fixed 是（不占有位置） 浏览器可视区 常用 sticky 否（占有位置） 浏览器可视区 当前阶段使用
1.一定记佳住相对定位、固定定位绝对定位两个大的特点： 1）.是否占有位置（脱标否）2）以谁为基准点移
动位置
2. 学习定位重点学会子绝父相
定位拓展
绝对定位的居中算法
left：50%；/*left走50%，父容器宽度的一半*/ margin-left：-自身宽度 /*margin 赋值，向左移动自身宽度的一半*/
