1.CSS布局的三种机制

1. 普通流（标准流）
2. 浮动：让盒子从普通流中浮起来--让多个盒子（div）水平排列成一行
3. 定位：将盒子定在某一个位置，自由的漂浮在其他盒子的上面--CSS离不开定位，特别是后面的js特效

2.定位详解

语法：

定位的概念：定位=定位模式+边偏移

3.1边偏移

3.2定位模式（position）

在CSS中，通过position属性定义元素的定位模式，语法如下：

定义模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

---

3.2.1静态定位（static）--了解

• 静态定位是元素的默认定位方式，无定位的意思。他相当于border里面的none，不要定位的时候用
• 静态定位，按照标准流特性摆放位置，它没有边偏移
• 静态定位在布局时我们几乎不用的

3.2.2 相对定位（relative）--重要

• 相对定位是元素相对于它，原来在标准流中的位置来说的。（自恋型）
• 效果图：

相对定位的特点：（务必记住）

• 相对于自己原来在标准流中位置来移动的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

3.2.3绝对定位（absolute）--重要

绝对定位是元素相对于他父级元素来设置元素的位置（拼爹型）

1. 完全脱标---完全不占位置；
2. 父元素没有定位，则以浏览器为准定位（Document文档）

3. 父元素要有定位

• 将元素依据最近的已经定位（绝对，固定或相对定位）的父元素（祖先）进行定位

绝对定位的特点（务必记住）

• 绝对是以带有定位的父级元素来移动位置（拼爹型），如果父级都没有定位，则以浏览器文档为准移动位置
• 不保留原来的位置，完全是脱标的 -定位口诀--子绝父相

子绝父相----子级是绝对定位，父级要用相对定位

3.2.4固定定位（fixed）---重要

固定定位是绝对定位的一种特殊形式：（认死理型） 如果说绝对定位是一个矩形，那么，固定定位就类似于正方形

1. 完全脱标---完全不占位置
2. 只认浏览器的可视窗口--浏览器可视窗口+边偏移属性来设置元素的位置；

• 父元素没有任何关系
• 不随滚动条滚动

4 定位（pisition）的扩展

4.1绝对定位的盒子居中

• 注意：绝对定位/固定定位的盒子，不能通过设置magrin：auto设置水平居中
• 在使用绝对定位时要想要实现水平居中，方法如图：

1. left：50%；：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left：-100px；：让盒子向左移动自身宽度的一半

5.2堆叠顺序（z-index）

• z-index特性如下：

1. 属性值：正整数，负整数或0，默认值是0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位

• 注意：z-index只能应用于相对定位，绝对定位和固定定位的元素，其他标准流，浮动和静态定位无效

5.3定位改变display属性

display是显示模式，可以改变显示模式有以下方式：

1. 可以用inlink-block转换为行内块
2. 可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
3. 绝对定位和固定定位也和浮动类似，默认转换的特性转换行内块 所以说，一个行内的盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等
4. 同时注意：

6.定位总结

• 注意：

1. 边偏移需要和定位模式联合使用，单独使用无效；
2. top和bottom不要同时使用
3. left和right不要同时使用