目录
简述：
1. 盒子定位后, 行内元素也具备了宽高属性。
2. 定位和浮动 ( float ) 不一样的是，浮动 ( float ) 只能压住后面标准流的盒子，但是不能压住图片和文字，而定位可以。
3. 当多个盒子出现在一个位置时，可以通过定位后的专有属性 z-index 设置他们的层级，数值最大的优先显示。
4. 盒子使用定位后, 默认情况下当前盒子的位置不会变，原来在哪显示就还在哪显示，只不过多了4个定位后的专有属性
( left、right、top、bottom ) 来控制盒子的位置，而使用这4个属性对盒子位置进行偏移时的参照点, 就取决与定位的方式。
静态定位（static）
默认就是静态定位, 属于标准流, left、right、top、bottom、z-index 全都无效。
固定定位（fixed）
浏览器分为多部份组成，比如 地址栏，菜单栏，收藏栏..., 通常情况下浏览器可视窗口指的是,
能真正显示HTML内容的那一部分。（使用 iframe 的时候特殊，每个iframe都是单独可视窗口）
特点：
1. 固定定位后的盒子不会随滚动条移动。
2. 固定定位会脱离标准流, 所以不占有原先位置, 即使未移动, 后面的元素也会占有它的位置，而固定定位盒子本身会再原位置浮起来。
3. 固定定位后的盒子在使用 ( left、right、top、bottom ) 进行位置偏移时的参照点, 是浏览器的可视窗口, （具体参照点为可视窗口的左上角）
效果：
动图中代码解读:
动图中总共分四部分
1. 初始状态: 3个盒子整齐排列
2. 添加固定定位后: 第一个盒子和当前盒子（ 加了定位的盒子 ）位置未发生变化, 但是第三个盒子不见了
3. 添加层级属性后: 让当前盒子置于最底层后，第三个盒子出现了，说明当前盒子添加固定定位后, 已经不占有原来文档流中的位置, 位置被第三个盒子占用了，之前看不见第三个盒子是因为, 当前盒子在原位置浮起来, 所以盖住了第三个盒子
4. 添加偏移属性后: 当前盒子参照浏览器可视窗口的位置向下方和右侧分别移动了200px。(这个案例中运行结果部分为可视窗口)
相对定位（relative）
特点:
1. 相对定位不脱离标准流， 即使它被移动了，原有的位置也会一直被占用。
2. 相对定位后的盒子在使用 ( left、right、top、bottom ) 进行位置偏移时的参照点, 就是它原有位置。（具体参照点为原来位置的左上角）
效果:
动图中代码解读:
动图中总共分三部分
1. 初始状态: 3个盒子整齐排列
2. 添加相对定位后: 当前盒子（ 加了定位的盒子 ）和另外2个盒子的位置都未发生变化
3. 添加偏移属性后: 当前盒子参照原来的位置向下方和右侧分别移动了200px。
绝对定位（absolute）
特点：
1. 绝对定位会脱离标准流, 所以不占有原先位置, 即使未移动, 后面的元素也会占有它的位置，而绝对定位盒子本身会在原位置浮起来。
2. 没有父级或父级无定位的情况，移动时的参照点以浏览器可视窗口左上角为准。
3. 父级有定位的情况，以父级盒子左上角为准，当有多个父级，以最近的一个有定位的父级为准。
4. 子绝父相：通常都会让父盒子先有定位, 然后让绝对定位的盒子, 以父盒子为参照点移动。如果没有特殊场景，父盒子最好使用相对定位, 这样既能给绝对定位的盒子参照点，又不会脱离标准流影响后面的盒子。
效果：
动图中代码解读:
1. 初始状态: 3个盒子整齐排列
2. 添加绝对定位后: 当前盒子（ 加了定位的盒子 ）位置未发生变化，但是浮了起来，不再占有原来位置，导致后面的盒子占有了它的位置, 但是因为当前盒子浮了起来, 所以后面盒子被盖住。
3. 添加偏移属性后: 父级无定位的盒子, 参照浏览器可视窗口左上角的位置移动, 有父级定位的盒子参照父级盒子左上角的位置移动。
粘性定位（sticky）
特点:
1. 粘性定位必须搭配一个移动属性才能有效果。
2. 当滚动条未滑动时, 粘性定位的特性和相对定位一样
3. 当滚动条滑动时，粘性定位的特性和固定定位一样
效果:
动图解读:
从图中可以看出, 滚动条未滑动时, 当前盒子（ 加了定位的盒子 ）仍占有原来位置，未脱离文档流, 符合相对定位的特性, 但是当滚动条滑动时, 当前盒子就不在占有原有位置，而是浮了起来，并且当前盒子不会随着滚动条移动，满足固定定位的特性，
所以说粘性定位是 固定定位和相对定位的结合体。
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
