定位的基本思想很简单，它允许用户通过属性定义将元素相对于其应该出现的位置进行位移，这个属性对于建立元素布局的定位机制起着重要作用。
定位方式
1.静态定位（static）
静态定位是position属性的默认值，盒子按照标准流进行布局，即该元素出现在文档的常规位置，不会重新定位。
2.相对定位（absolute）
使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置，使用相对定位，除了要指定一定的的移量。其中，水平方向的偏移由 left 和 right属性指定；垂直方向的偏移量由top和bottom 属性指定。
示例：
.card { width: 300px; height: 200px; background-color: #ff6b6b; border-radius: 10px; padding: 20px; color: white; font-size: 18px; margin-bottom: 600px; }3. 绝对定位（absolute）
使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，就以浏览器窗口为基准进行定位。“已经定位”是指定义了static 之外的 position。
绝对定位的盒子从标准流中脱离，对其后的兄弟盒子的定位没有影响，其他的盒子就好这个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。
示例：
.tag { width: 80px; height: 30px; background-color: #4dabf7; border-radius: 5px; font-size: 14px; text-align: center; line-height: 30px; position: relative; left: 250px; bottom: 80px; }4. 固定定位
固定定位(position: fixed)其实是绝对定位的子类别，一个设置了 position:fixed的元素是相对于视窗固定的，就算页面文档发生了滚动，它也会一直待在相同的地方。
示例：
.back-btn { width: 50px; height: 50px; background-color: #51cf66; border-radius: 50%; text-align: center; line-height: 50px; color: white; font-weight: bold; cursor: pointer; position: fixed; right: 40px; bottom: 40px; }它们的最终效果如下图所示：
