一.定位：将盒子定在某一个位置，其规则为：定位 = 定位模式 + 边偏移 。

二：定位模式

1.static静态定位: 元素无设置的时候就是static

        “position:static;”

2.relative相对定位：相对于当前位置进行移动，通过设置偏移属性（top、right、bottom、left）来使其在水平和垂直方向上发生相对位移。

a)开启相对定位后层级变高

3:absolute绝对定位：是相对于最近的且不是static定位的父元素（祖先及包含块）来定位，如果没有，则为浏览器窗口来进行定位

a)开启绝对定位后元素会脱离文档流：原地起飞

b)如果父元素开启了定位，那么位置计算相对于父元素

c)如果没有包含块，则位置计算相对于浏览器

*文档流：元素的排布规则

4：fixed固定定位: 已经固定，一直保持该位置。

5:sticky粘性定位:在 position:relative 与 position:fixed 定位之间切换。滚动到一定距离便保持不动。

三：练习

1.题目

页面中有一个容器 <div>，设置为相对定位，大小为 800px 宽、600px 高。
容器内部有三个元素，分别是：
一个 div (红色背景) 使用 absolute 定位，位于容器的右上角，距离右边 10px，距离上边 10px。
一个 div (绿色背景) 使用 relative 定位，位于容器的左下角，距离下边 20px，左边 20px。
一个 div (蓝色背景) 使用 fixed 定位，始终固定在页面的左下角，距离页面左边 10px，底边 10px。