（重点）定位：相对定位、绝对定位、固定定位等，显示隐藏的3种方式：display:none；visibility:visible； overflow:visible；

学习笔记

学习来源：黑马前端p221-248
学习进度：day9

---

---

一、为什么要用定位？

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
而定位则是让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

二、定位的5种分类及各自的特点

1.定位的组成

定位 = 定位模式 + 边偏移
定位模式：用于指定一个元素在文档中的定位方式
边偏移：决定了该元素的最终位置

1.1定位模式

1.2边偏移

边偏移就是定位的盒子移动的最终位置。有top、bottom、left和right 4个属性

2.定位的4种分类

2.1静态定位static（了解）

静态定位时元素的默认定位方式，无定位的意思。
语法：选择器{ position：static; }
静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局上很少使用

2.2相对定位relative（重要）

1.相对定位是元素在移动位置的时候，是相对它原来的位置来说的（自恋型）
2.语法：选择器{ position:relative; }
3.特点：（1）相对于自己原来的位置来移动的（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
4.典型应用：限制绝对定位（给绝对定位当爹）

2.3绝对定位 absolute（重要）

1.绝对定位是元素在移动位置的时候，是相