开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十四天，点击查看活动详情
17.3 相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
选择器 {position:relative;}
相对定位特点：
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置（移动位置的时候，参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
17.4 绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：
选择器 {position:absolute;}
绝对定位的特点：
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原来的位置（脱标）
17.5 固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景︰可以在浏览器页面滚动时元素的位置不会改变
语法：
选择器 {position:fixed;}
固定定位特点：
- 以浏览器可视窗口为参照点移动元素
- 跟父类元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先位置（脱标）
17.6 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。
语法：
选择器 {position:sticky;top:10px;}
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差，IE不支持。
17.7 定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法：
选择器 {z-index: 1;}
- 数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
17.8 拓展
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位（固定定位）会压住下面标准流所有的内容。
